fix(风险监控) 控件人员多选

src/components/popover-select-v2/multiple_liu1tian.vue

@@ -0,0 +1,296 @@
+<script>
+import { REFER } from "../popover-select/api/index";
+import deepCopy from "@gby/deep-copy";
+
+export default {
+  name: "PopoverSelectV2",
+  props: {
+    // v-model
+    value: {
+      type: [Array, String, Number],
+      require: true,
+    },
+    // 参照类型 ，对应后端
+    referName: {
+      type: String,
+      require: true,
+    },
+    // 作为 value 唯一标识的键名，绑定值
+    valueKey: {
+      type: [String, null, undefined],
+    },
+    // 默认查询参数
+    queryParams: {
+      type: Function,
+      default: () => {},
+    },
+    // 需映射源数据
+    source: {
+      type: Object,
+      default: () => ({}),
+    },
+    // 参照内外映射
+    dataMapping: {
+      type: Object,
+      default: () => ({}),
+    },
+    // 回显
+    dataListArray: {
+      type: Array
+    },
+  },
+  components: {
+    ElSuperTable: () => import("@/components/super-table/index.vue"),
+  },
+  data() {
+    return {
+      size: "mini",
+      width: "50%",
+      page: { pageNum: 1, pageSize: 10, total: 0 },
+      visible: false,
+      loading: false,
+      scroll: false,
+      model: {
+        search: "",
+        isPage: true,
+      },
+      data: [],
+      selectData: [],
+      lastSelectData: [],
+    };
+  },
+  computed: {
+    innerValue: {
+      get() {
+        return this.value;
+      },
+      set(value) {
+        this.$emit("input", value);
+      },
+    },
+    TableColumns: {
+      get() {
+        const { referName } = this.$props;
+        return require(`../popover-select/components/${referName}`).default;
+      },
+    },
+  },
+  watch: {
+    innerValue: {
+      handler: function (newValue) {
+        if (!newValue) this.lastSelectData = [];
+      },
+    },
+    dataListArray: {
+      handler: function (newValue) {
+        console.log("A:::" + JSON.stringify(newValue))
+        if (newValue.length>0){
+          newValue.forEach(element => {
+            this.lastSelectData.push(element)
+          });
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    // open dialog
+    async open() {
+      let { disabled } = this.$attrs;
+      if (!disabled) {
+        this.visible = true;
+        await this.useReset();
+      }
+    },
+    // hide dialog
+    async hide() {
+      this.visible = false;
+    },
+    // fetch list
+    async fetchList(prop, page) {
+      try {
+        // try
+        this.loading = true;
+        const { pageNum, pageSize } = page;
+        const { referName: type, source, queryParams } = this.$props;
+        const { code, rows, total } = await REFER(
+          {
+            ...prop,
+            ...queryParams(source),
+            type: type,
+          },
+          {
+            pageNum,
+            pageSize,
+          }
+        );
+        if (code === 200) {
+          this.data = rows;
+          this.page.total = total;
+        }
+      } catch (err) {
+        // catch
+        console.error(err);
+      } finally {
+        // finally
+        this.loading = false;
+      }
+    },
+    // reset
+    async useReset() {
+      this.data = [];
+      this.model.search = null;
+      await this.fetchList(this.model, this.page);
+    },
+    // query
+    async useQuery() {
+      await this.fetchList(this.model, this.page);
+    },
+    // select
+    useSelect(prop) {
+      this.selectData = prop;
+    },
+    // delete
+    useDelete(prop) {
+      this.selectData.splice(prop, 1);
+      this.useConfirm(this.selectData);
+    },
+    // confirm
+    useConfirm(prop) {
+      const {
+        $props: { valueKey },
+      } = this;
+      // string
+      if (typeof valueKey === "string") {
+        this.innerValue = prop.map((item) => item[valueKey]);
+      }
+      // null
+      else {
+        this.innerValue = prop;
+      }
+      //
+      this.hide();
+      this.lastSelectData = deepCopy(prop);
+      // console.log("A:::" + JSON.stringify(this.lastSelectData))
+      this.$emit("change", prop, this.$props);
+    },
+    // cancel
+    useCancel() {
+      this.hide();
+    },
+  },
+  created() {},
+  mounted() {},
+  destroyed() {},
+};
+</script>
+<template>
+  <div class="popover-select-v2 popover-select-v2--multiple">
+    <el-input v-bind="$attrs" @focus="open">
+      <i class="el-icon-search" slot="suffix" @click="open"> </i>
+    </el-input>
+    <el-dialog
+      :width="width"
+      :visible.sync="visible"
+      :show-close="false"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      append-to-body
+    >
+      <div slot="title" style="display: flex; justify-content: space-between">
+        <el-form
+          :size="size"
+          :inline="true"
+          :model="model"
+          @submit.native.prevent
+          style="display: flex; flex-direction: column"
+        >
+          <div>
+            <el-form-item prop="search">
+              <el-input
+                v-model="model.search"
+                @change="useQuery"
+                @keydown.enter="useQuery"
+              >
+              </el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button icon="el-icon-refresh" @click="useReset"></el-button>
+            </el-form-item>
+          </div>
+        </el-form>
+        <div>
+          <el-button
+            type="primary"
+            :size="$attrs.size"
+            :loading="loading"
+            @click="useConfirm(selectData)"
+          >
+            确认
+          </el-button>
+          <el-button :size="$attrs.size" :loading="loading" @click="hide">
+            取消
+          </el-button>
+        </div>
+      </div>
+      <div
+        v-loading="loading"
+        style="height: 40vh; display: flex; margin-top: -30px"
+      >
+        <el-super-table
+          v-model="data"
+          :size="size"
+          :page="page"
+          :columns="TableColumns"
+          checkbox
+          pagination
+          highlight-current-row
+          @pagination="useQuery"
+          @row-select="useSelect"
+          @row-dblclick="useConfirm([$event])"
+        >
+        </el-super-table>
+      </div>
+    </el-dialog>
+    <el-scrollbar
+      v-if="lastSelectData.length"
+      :viewStyle="{
+        display: 'flex',
+        alignItems: 'center',
+        padding: '5px 0 0 5px',
+      }"
+      class="popover-select-v2_tags"
+    >
+      <el-tag
+        v-for="(tag, index) in lastSelectData"
+        hit
+        closable
+        :size="size"
+        @close="useDelete(index)"
+        style="margin-right: 5px"
+      >
+        {{ tag.name || tag[valueKey] }}
+      </el-tag>
+    </el-scrollbar>
+  </div>
+</template>
+<style scoped>
+.popover-select-v2 .el-input {
+  width: inherit;
+  height: 100%;
+}
+.popover-select-v2 .el-input .el-icon-search {
+  cursor: pointer;
+}
+.popover-select-v2 .popover-select-v2_tags {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: calc(100% - 40px);
+  height: 100%;
+}
+::v-deep .el-table--mini .el-table__cell {
+  height: 50px;
+}
+</style>

src/views/ctyc/info/demo.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="app-container">
+    <ElPopoverSelectV2
+                  ref="materialPopoverSelect"
+                  title="监控人员"
+                  :dataListArray="dataListArray"
+                  v-model="form.monitorBy"
+                  :source.sync="form"
+                  valueKey="code"
+                  :dataMapping="{monitorBy:'code',monitorByName: 'name'}"
+                  referName="CONTACTS_PARAM"
+                  style="width: 100%"
+                  @change="materialReferenceChange"
+                >
+                </ElPopoverSelectV2>
+                <el-button @click="btn1"> 按钮 </el-button>
+  </div>
+</template>
+
+<script>
+import { listInfo, getInfo, delInfo, addInfo, updateInfo, fileImport } from "@/api/ctyc/info";
+
+export default {
+  name: "Info",
+  components: {
+    BatchImport: () => import("@/components/BatchImport/indexa.vue"),
+    ElPopoverSelectV2: () => import("@/components/popover-select-v2/multiple_liu1tian.vue")
+  },
+  data() {
+    return {
+      form:{},
+      dataListArray:[]
+    };
+  },
+  created() {
+
+  },
+  methods: {
+    openMaterialReference() {
+      let { open } = this.$refs.materialPopoverSelect[0];
+      open();
+    },
+    materialReferenceChange(prop, { source }) {
+      prop.forEach(element => {
+        this.dataListArray.push({
+          id: element.code, name: element.name
+        })
+      });
+      console.log("A:::" + JSON.stringify(this.dataListArray))
+    },
+    btn1(){
+      let arr = [{"code":"000001","name":"郭德斌"},{"code":"000002","name":"陈荣"}];
+      this.dataListArray = arr;
+    }
+  }
+};
+</script>

src/views/ctyc/info/index.vue

@@ -76,10 +76,11 @@
           <ElPopoverSelectV2
                   ref="materialPopoverSelect"
                   title="监控人员"
-                  v-model="form.monitorByName"
+                  :dataListArray="dataListArray"
+                  v-model="form.monitorBy"
                   :source.sync="form"
-                  valueKey="name"
-                  :dataMapping="{monitorBy:'id',monitorByName: 'name'}"
+                  valueKey="code"
+                  :dataMapping="{monitorBy:'code',monitorByName: 'name'}"
                   referName="CONTACTS_PARAM"
                   style="width: 100%"
                   @change="materialReferenceChange"
@@ -102,7 +103,7 @@ export default {
   name: "Info",
   components: {
     BatchImport: () => import("@/components/BatchImport/indexa.vue"),
-    ElPopoverSelectV2: () => import("@/components/popover-select-v2/index.vue")
+    ElPopoverSelectV2: () => import("@/components/popover-select-v2/multiple_liu1tian.vue")
   },
   data() {
     return {
@@ -143,9 +144,12 @@ export default {
       },
       // 表单参数
       form: {},
+      // 监控人员
+      dataListArray:[],
+      // 人
+      popList: [],
       // 表单校验
-      rules: {
-      }
+      rules: {}
     };
   },
   created() {
@@ -158,10 +162,12 @@ export default {
       open();
     },
     materialReferenceChange(prop, { source }) {
-      this.params.sysMaterialApply = {
-        ...this.params.sysMaterialApply,
-        ...source,
-      };
+      this.popList = [];
+      prop.forEach(element => {
+        this.popList.push({
+          id: element.code, name: element.name
+        })
+      });
     },
     // 确认导入
     handelImport(fileList) {
@@ -253,10 +259,42 @@ export default {
         this.form = response.data;
         this.open = true;
         this.title = "修改合作企业";
+        if(this.form != undefined && this.form.monitorBy != ''){
+          this.dataListArray = [];
+          if(this.form.monitorBy.includes(',')){
+            let sz = this.form.monitorBy.split(',');
+            let nameSz = this.form.monitorByName.split(',');
+            sz.forEach((element,index) => {
+              this.dataListArray.push({
+                code: element, name: nameSz[index]
+              })
+            });
+          }else{
+            this.dataListArray.push({
+              code: this.form.monitorBy, name: this.form.monitorByName
+            })
+          }
+        }
       });
     },
     /** 提交按钮 */
     submitForm() {
+      if(this.popList.length>0){
+        let monitorByStr = '';
+        let monitorByNameStr = '';
+        this.popList.forEach((element,index) => {
+          monitorByStr = monitorByStr + element.id;
+          if(index+1 != this.popList.length){
+            monitorByStr = monitorByStr + ",";
+          }
+          monitorByNameStr = monitorByNameStr + element.name;
+          if(index+1 != this.popList.length){
+            monitorByNameStr = monitorByNameStr + ",";
+          }
+        });
+        this.$set(this.form,'monitorBy',monitorByStr);
+        this.$set(this.form,'monitorByName',monitorByNameStr);
+      }
       this.$refs["form"].validate(valid => {
         if (valid) {
           if (this.form.id != null) {