经销商授权信息管理开发

src/api/marketing/dealer-authorization.js

@@ -0,0 +1,18 @@
+/* 经销商授权信息管理 */
+
+import request from '@/utils/request';
+
+
+// 经销商授权信息列表
+const dealerList = (params, page) => {
+
+  return request({
+    url: `dealer/list?pageSize=${page.pageSize}&pageNum=${page.pageNum}`,
+    method: 'get',
+    params,
+  })
+}
+
+export default {
+  dealerList
+}

src/views/marketing/dealer-authorization/authprivAdd.vue

@@ -0,0 +1,118 @@
+<!-- 经销商授权信息 编辑新增-->
+<template>
+  <el-dialog :title="isAdd ? '新增' : '编辑'" :visible.sync="visible" :close-on-click-modal="false"
+    :close-on-press-escape="false">
+    <el-form :model="formData" ref="authprivAdd" label-position="left" label-width="120px">
+
+      <el-form-item v-for="column in formColumns" :label="column.title" :prop="column.key"
+        :rules="{ required: true, message: `请输入${column.title}`, trigger: column.type == 'Input' ? 'blur' : 'change' }">
+
+        <el-input v-if="column.type == 'Input'" :clearable="column.clearable" v-model="formData[column.key]"
+          autocomplete="off"></el-input>
+
+        <el-date-picker v-if="column.type == 'DateRange'" :clearable="column.clearable" v-model="formData[column.key]"
+        format="yyyy-MM-dd " value-format="yyyy-MM-dd"   type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
+
+        <el-date-picker v-if="column.type == 'Date'" :clearable="column.clearable" v-model="formData[column.key]"
+        format="yyyy-MM-dd " value-format="yyyy-MM-dd"   type="date" placeholder="选择日期"></el-date-picker>
+
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="handleCancel">取 消</el-button>
+      <el-button type="primary" @click="handleConfirm('authprivAdd')">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { fcall } from 'q';
+
+export default {
+
+  name: 'authprivAdd',
+
+  data() {
+    const arr2Obj = function (data, keyName, valueName) {
+      return Object.fromEntries(
+        data.map((item) => [item[keyName], item[valueName]])
+      );
+    };
+
+    const formColumns = [
+      { title: '经销商名称', key: 'dealerName', type: 'Input' },
+      { title: '授权区/医院', key: 'authorizedAreaName', type: 'Input' },
+      { title: '授权产品', key: 'authorizedProductsName', type: 'Input' },
+      { title: '授权期限', key: 'time', type: 'DateRange' },
+      { title: '授权书开具时间', key: 'issueTime', type: 'Date' },
+    ];
+
+    const initFormColumns = () =>
+      formColumns.map((column) => {
+        const clearable = column.clearable || true;
+        return {
+          ...column,
+          clearable,
+        };
+      });
+
+    const initFormData = () => arr2Obj(initFormColumns(), "key", "value")
+
+    return {
+      visible: false,
+      isAdd: true,
+      formData: { ...initFormData() },
+      formColumns: initFormColumns(),
+
+    }
+  },
+  methods: {
+    // 控制弹窗展示
+    setVisible(val) {
+
+      this.visible = val;
+
+    },
+    // 取消
+    handleCancel() {
+      this.setVisible(false);
+    },
+    // 确定
+    handleConfirm(formName) {
+
+      console.log(this.formData, 'this.formData');
+
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          // 校验通过
+          let isTime = this.formData.time && this.formData.time != '' && this.formData.time.length;
+          let params = {
+            ...this.formData,
+            startTime: isTime ? this.formData.time[0] : '',
+            endTime: isTime ? this.formData.time[1] : '',
+          }
+          delete params['time']
+          console.log(params, 'params--------');
+          // this.setVisible(false);
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+  },
+  created() {
+
+  }
+
+}
+</script>
+
+
+<style lang="scss" scoped>
+.authpriv {
+  width: calc(100% - 24px);
+  height: 100%;
+  margin: 10px
+}
+</style>

src/views/marketing/dealer-authorization/authprivSee.vue

@@ -0,0 +1,74 @@
+<!-- 经销商授权信息-查看 -->
+<template>
+  <el-dialog title="查看" :visible.sync="visible" :close-on-click-modal="false" :close-on-press-escape="false">
+    <el-form :model="formData" label-position="left" label-width="120px">
+      <el-form-item v-for="column in formColumns" :label="column.title" :prop="column.key">
+        <el-input v-if="column.type == 'Input'" readonly v-model="formData[column.key]" autocomplete="off"></el-input>
+
+        <el-date-picker v-if="column.type == 'DateRange'" disabled v-model="formData[column.key]" type="daterange"
+        format="yyyy-MM-dd " value-format="yyyy-MM-dd"  range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
+
+        <el-date-picker v-if="column.type == 'Date'" disabled v-model="formData[column.key]" type="date"
+        format="yyyy-MM-dd " value-format="yyyy-MM-dd"   placeholder="选择日期"></el-date-picker>
+
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="setVisible(false)">取 消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+
+  name: 'authprivSee',
+
+  data() {
+    const arr2Obj = function (data, keyName, valueName) {
+      return Object.fromEntries(
+        data.map((item) => [item[keyName], item[valueName]])
+      );
+    };
+
+    const formColumns = [
+      { title: '经销商名称', key: 'dealerName', type: 'Input' },
+      { title: '授权区/医院', key: 'authorizedAreaName', type: 'Input' },
+      { title: '授权产品', key: 'authorizedProductsName', type: 'Input' },
+      { title: '授权期限', key: 'time', type: 'DateRange' },
+      { title: '授权书开具时间', key: 'issueTime', type: 'Date' },
+    ];
+
+    const initFormColumns = () => formColumns;
+    const initFormData = () => arr2Obj(initFormColumns(), "key", "value")
+
+    return {
+      visible: false,
+      formData: { ...initFormData() },
+      formColumns: initFormColumns(),
+
+    }
+  },
+  methods: {
+    // 控制弹窗展示
+    setVisible(val) {
+
+      this.visible = val;
+
+    },
+  },
+  created() {
+
+  }
+
+}
+</script>
+
+
+<style lang="scss" scoped>
+.authpriv {
+  width: calc(100% - 24px);
+  height: 100%;
+  margin: 10px
+}
+</style>

src/views/marketing/dealer-authorization/index.vue

@@ -0,0 +1,238 @@
+<!-- 经销商授权信息管理--列表 -->
+<template>
+  <el-card class="dealerAuthorization" v-loading="loading" :body-style="{ padding: 0 }">
+
+    <authprivAdd ref="addDialogRef"></authprivAdd>
+    <authprivSee ref="seeDialogRef"></authprivSee>
+
+    <!-- 检索区 -->
+    <el-form :inline="true" size="mini" label-position="right" label-width="100px" :model="searchParams"
+      style="padding: 10px 0 0 0">
+
+      <el-form-item v-for="column in searchColumns " :label="column.title" :key="column.key">
+        <el-input v-if="column.type == 'Input'" v-model="searchParams[column.key]" clearable></el-input>
+        <el-select v-if="column.type == 'Select'" v-model="searchParams[column.key]" clearable>
+          <el-option v-for="op in column.options" :label="op.label" :value="op.value"></el-option>
+        </el-select>
+        <el-date-picker v-if="column.type == 'DateRange'" v-model="searchParams[column.key]" clearable type="daterange"
+          format="yyyy-MM-dd " value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"
+          end-placeholder="结束日期">
+        </el-date-picker>
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" @click="handelSearch">查询</el-button>
+        <el-button @click="handelResetSearch">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 操作区 -->
+    <el-row :gutter="24" style="padding: 0 10px">
+      <el-col :span="24" style="text-align: right">
+        <el-button size="mini" type="primary" @click="handleOpenAddDialog">新增</el-button>
+        <el-button size="mini" @click="handleSubmit">提交</el-button>
+        <el-button size="mini" @click="handleDownload">下载授权书</el-button>
+      </el-col>
+    </el-row>
+
+    <!-- 数据展示 -->
+    <el-table class="da-table" @row-dblclick="handleOpenSeeDialog" @select="handleSelect" :data="tableData"
+      highlight-current-row max-height="500">
+      <el-table-column type="selection" width="35"></el-table-column>
+      <el-table-column type="index" width="55" label="序号"></el-table-column>
+      <el-table-column v-for="column in tableColumns" :prop="column.key" :label="column.title" v-if="column.show"
+        :width="column.width || 180">
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" width="120">
+        <template slot-scope="scope">
+          <el-button type="text" size="small" @click="handleOpenAddDialog(scope.row)">编辑</el-button>
+          <el-button type="text" size="small" @click="handleDelDialog(scope.row)">删除</el-button>
+          <el-button @click="handleOpenSeeDialog(scope.row)" type="text" size="small">查看</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="total"
+      :page-sizes="pageSizes" :page-size="page.pageSize" :current-page="page.pageNum" hide-on-single-page
+      layout="total, prev, pager, next, sizes, jumper">
+    </el-pagination>
+
+  </el-card>
+</template>
+
+<script>
+import authprivAdd from './authprivAdd.vue';
+import authprivSee from './authprivSee.vue';
+
+export default {
+
+  name: 'dealerAuthorization',
+  components: {
+    authprivAdd,
+    authprivSee,
+  },
+
+  data() {
+    const arr2Obj = function (data, keyName, valueName) {
+      return Object.fromEntries(
+        data.map((item) => [item[keyName], item[valueName]])
+      );
+    };
+    // 查询条件列
+    const searchColumns = [
+      { key: "dealerName", title: "经销商名称", type: "Input" },
+      { key: "authorizedAreaName", title: "授权区域/医院", type: "Input" },
+      { key: "authorizedProductsName", title: "授权产品", type: "Input" },
+      // 单据状态0=自由态，1=审批中，2=已审核，3=已驳回
+      {
+        key: "status", title: "状态", type: "Select", options: [
+          { value: 0, label: '自由态' },
+          { value: 1, label: '审批中' },
+          { value: 2, label: '已审核' },
+          { value: 3, label: '已驳回' },
+        ]
+      },
+      { title: "授权时间", key: "time", type: "DateRange" },
+    ];
+
+    // 表列
+    const tableColumns = [
+      { key: "authorizedProductsCode", title: "授权产品 编码", show: true },
+      { key: "dealerName", title: "经销商名称", show: true },
+      { key: "authorizedAreaCode", title: "授权区域/医院 编码", show: false },
+      { key: "authorizedAreaName", title: "授权区域/医院 名称", show: true },
+      { key: "authorizedProductsName", title: "授权产品 名称", show: true },
+      { key: "status", title: "状态", show: true },
+      { key: "createPerson", title: "创建人", show: true },
+      { key: "createTime", title: "创建时间", show: true },
+      { key: "updatePerson", title: "最后修改人", show: true },
+      { key: "updateTime", title: "最后修改时间", show: true },
+      { key: "id", title: "主键id----该值不显示", show: false },
+      { key: "startTime", title: "开始时间", show: false },
+      { key: "endTime", title: "结束时间", show: false },
+      { key: "issueTime", title: "授权书开具时间", show: false },
+    ];
+
+    const initTableColumns = () => tableColumns;
+    const initSearchColumns = () => searchColumns;
+    const initSearchParams = () => arr2Obj(initSearchColumns(), "key", "value");
+    return {
+      loading: false,
+      searchColumns: initSearchColumns(),
+      searchParams: {
+        // isAsc: "desc",
+        // reasonable: "",
+        // orderByColumn: "",
+        ...initSearchParams(),
+      },
+      tableColumns: initTableColumns(),
+      tableData: [
+        {
+          authorizedProductsCode: "授权产品 编码",
+          dealerName: "经销商名称",
+          authorizedAreaCode: "授权区域/医院 编码",
+          authorizedAreaName: "授权区域/医院 名称",
+          authorizedProductsName: "授权产品 名称",
+          status: "状态",
+          createPerson: "创建人",
+          createTime: "创建时间",
+          updatePerson: "最后修改人",
+          updateTime: "最后修改时间",
+          id: "主键id----该值不显示",
+          startTime: "开始时间",
+          endTime: "结束时间",
+          issueTime: "授权书开具时间",
+        }
+      ],
+      checkedList: [],
+      page: { pageNum: 1, pageSize: 25 },
+      total: 0,
+      pageSizes: [10, 20, 50, 100],
+    }
+  },
+  methods: {
+    // 查询
+    handelSearch() {
+      console.log(this.searchParams, '查询');
+      let isTime = this.searchParams.time && this.searchParams.time != '' && this.searchParams.time.length;
+      let params = {
+        ...this.searchParams,
+        startTime: isTime ? this.searchParams.time[0] : '',
+        endTime: isTime ? this.searchParams.time[1] : '',
+      }
+      delete params['time']
+      console.log(params, 'params--------');
+
+    },
+    // 重置
+    handelResetSearch() {
+      console.log('重置');
+
+      for (const key in this.searchParams) {
+
+        this.searchParams[key] = '';
+      }
+    },
+    // 刷新
+    handleRefresh() {
+
+    },
+    handleSizeChange() { },
+    handleCurrentChange() { },
+
+    // 选择列表
+    handleSelect(selection, row) {
+      console.log('selection/////////', selection, 'row/////////', row);
+      this.checkedList = [...selection];
+    },
+    // 新增授权信息
+    handleOpenAddDialog(rows) {
+      console.log(rows, '授权信息');
+
+      const { setVisible } = this.$refs.addDialogRef;
+
+      setVisible(true);
+
+    },
+    // 编辑、查看
+    handleOpenSeeDialog(rows) {
+      console.log(rows, '编辑、查看');
+      const { setVisible } = this.$refs.seeDialogRef;
+
+      setVisible(true);
+    },
+    // 删除
+    handleDelDialog(rows) {
+      console.log(rows, '删除');
+    },
+    // 提交
+    handleSubmit() {
+      console.log('提交');
+    },
+    // 下载
+    handleDownload() {
+      console.log('下载');
+    },
+
+  },
+  created() {
+
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+.dealerAuthorization {
+  width: calc(100% - 24px);
+  height: 100%;
+  margin: 10px;
+  padding: 10px;
+  box-sizing: border-box;
+
+  .da-table {
+    width: 100%;
+    margin: 20px 0 0 0;
+  }
+}
+</style>