From 27da4a2c5396cf5c76b45ba67db05855ee48ae50 Mon Sep 17 00:00:00 2001
From: ssc <273702440@qq.com>
Date: Mon, 10 Apr 2023 21:17:15 +0800
Subject: [PATCH] fix: model scope submit error

---
 .../components/nf-user-option/index.vue       | 321 +++++++++++-------
 1 file changed, 189 insertions(+), 132 deletions(-)

diff --git a/src/views/plugin/workflow/components/nf-user-option/index.vue b/src/views/plugin/workflow/components/nf-user-option/index.vue
index 852bc50..cbcfac8 100755
--- a/src/views/plugin/workflow/components/nf-user-option/index.vue
+++ b/src/views/plugin/workflow/components/nf-user-option/index.vue
@@ -1,137 +1,155 @@
 <template>
-  <el-dialog ref="nf-dialog"
-             class="nf-dialog"
-             v-model="visible"
-             title="权限配置"
-             width="60%"
-             :before-close="handleClose"
-             append-to-body>
-    <p v-if="all"
-       style="padding: 0 20px;">不限制权限，所有人均可发起：<el-switch v-model="switchAll"></el-switch>（平台需单独配置）</p>
-    <el-table v-if="visible"
-              :data="data"
-              border
-              size="default">
-      <el-table-column align="center"
-                       header-align="center"
-                       width="80">
+  <el-dialog
+    ref="nf-dialog"
+    class="nf-dialog"
+    v-model="visible"
+    title="权限配置"
+    width="60%"
+    :before-close="handleClose"
+    append-to-body
+  >
+    <p v-if="all" style="padding: 0 20px">
+      不限制权限，所有人均可发起：<el-switch v-model="switchAll"></el-switch>（平台需单独配置）
+    </p>
+    <el-table v-if="visible" :data="data" border size="default">
+      <el-table-column align="center" header-align="center" width="80">
         <template #header>
-          <el-button circle
-                     type="primary"
-                     size="default"
-                     icon="el-icon-plus"
-                     @click="data.push({})"></el-button>
+          <el-button
+            circle
+            type="primary"
+            size="default"
+            icon="el-icon-plus"
+            @click="data.push({})"
+          ></el-button>
         </template>
-        <template #default="{$index}">
-          <el-button circle
-                     type="danger"
-                     size="default"
-                     icon="el-icon-delete"
-                     @click="data.splice($index, 1)"></el-button>
+        <template #default="{ $index }">
+          <el-button
+            circle
+            type="danger"
+            size="default"
+            icon="el-icon-delete"
+            @click="data.splice($index, 1)"
+          ></el-button>
         </template>
       </el-table-column>
-      <el-table-column label="类型"
-                       prop="type"
-                       align="center"
-                       header-align="center">
-        <template #default="{row, $index}">
-          <el-select v-model="row.type"
-                     size="default"
-                     placeholder="类型"
-                     @change="handleTypeChange($index)">
-            <el-option v-for="item in typeList"
-                       :key="item.value"
-                       :label="item.label"
-                       :value="item.value"
-                       :disabled="Boolean(data.find(d => d.type == item.value)) || (switchAll && !['platform'].includes(item.value))"></el-option>
+      <el-table-column label="类型" prop="type" align="center" header-align="center">
+        <template #default="{ row, $index }">
+          <el-select
+            v-model="row.type"
+            size="default"
+            placeholder="类型"
+            @change="handleTypeChange($index)"
+          >
+            <el-option
+              v-for="item in typeList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+              :disabled="
+                Boolean(data.find(d => d.type == item.value)) ||
+                (switchAll && !['platform'].includes(item.value))
+              "
+            ></el-option>
           </el-select>
         </template>
       </el-table-column>
-      <el-table-column label="值"
-                       prop="text"
-                       align="center"
-                       header-align="center">
-        <template #default="{row, $index}">
+      <el-table-column label="值" prop="text" align="center" header-align="center">
+        <template #default="{ row, $index }">
           <template v-if="row.type == 'user'">
-            <el-input v-model="row.text"
-                      size="default"
-                      placeholder="用户"
-                      readonly
-                      @click="handleSelect($index, 'user-select')">
+            <el-input
+              v-model="row.text"
+              size="default"
+              placeholder="用户"
+              readonly
+              @click="handleSelect($index, 'user-select')"
+            >
               <template #append>
                 <el-button icon="el-icon-plus"></el-button>
               </template>
             </el-input>
           </template>
           <template v-else-if="row.type == 'role'">
-            <el-tree-select :ref="`role_${$index}`"
-                            v-model="row.value"
-                            size="default"
-                            multiple
-                            clearable
-                            placeholder="角色"
-                            :data="roleList"
-                            :props="roleProps || {label: 'roleName', value: 'id'}"
-                            @change="handleChange($index, `role_${$index}`)">
+            <el-tree-select
+              :ref="`role_${$index}`"
+              v-model="row.value"
+              size="default"
+              multiple
+              clearable
+              placeholder="角色"
+              :data="roleList"
+              show-checkbox
+              check-strictly
+              @change="handleChange($index, `role_${$index}`)"
+            >
             </el-tree-select>
           </template>
           <template v-else-if="row.type == 'dept'">
-            <el-input v-model="row.text"
-                      size="default"
-                      placeholder="部门"
-                      readonly
-                      @click="handleSelect($index, 'dept-select')">
+            <el-input
+              v-model="row.text"
+              size="default"
+              placeholder="部门"
+              readonly
+              @click="handleSelect($index, 'dept-select')"
+            >
               <template #append>
                 <el-button icon="el-icon-plus"></el-button>
               </template>
             </el-input>
           </template>
           <template v-else-if="row.type == 'post'">
-            <el-tree-select :ref="`post_${$index}`"
-                            v-model="row.value"
-                            size="default"
-                            multiple
-                            clearable
-                            placeholder="职位"
-                            :data="postList"
-                            :props="postProps || {label: 'postName', value: 'id'}"
-                            @change="handleChange($index, `post_${$index}`)">
+            <el-tree-select
+              :ref="`post_${$index}`"
+              v-model="row.value"
+              size="default"
+              multiple
+              clearable
+              placeholder="职位"
+              :data="postList"
+              show-checkbox
+              check-strictly
+              @change="handleChange($index, `post_${$index}`)"
+            >
             </el-tree-select>
           </template>
           <template v-else-if="row.type == 'platform'">
-            <el-tree-select :ref="`platform_${$index}`"
-                            v-model="row.value"
-                            size="default"
-                            multiple
-                            clearable
-                            placeholder="平台"
-                            :data="platformList"
-                            @change="handleChange($index, `platform_${$index}`)">
+            <el-tree-select
+              :ref="`platform_${$index}`"
+              v-model="row.value"
+              size="default"
+              multiple
+              clearable
+              placeholder="平台"
+              :data="platformList"
+              show-checkbox
+              check-strictly
+              @change="handleChange($index, `platform_${$index}`)"
+            >
             </el-tree-select>
           </template>
         </template>
       </el-table-column>
     </el-table>
     <template #footer>
-      <el-button @click="handleClose"
-                 size="default">取消</el-button>
-      <el-button type="primary"
-                 @click="handleSubmit"
-                 size="default">确定</el-button>
+      <el-button @click="handleClose" size="default">取消</el-button>
+      <el-button type="primary" @click="handleSubmit" size="default">确定</el-button>
     </template>
 
-    <nf-user-select ref="user-select"
-                    check-type="checkbox"
-                    :user-url="userUrl"
-                    :custom-option="customOption"
-                    :default-checked="defaultChecked"
-                    @onConfirm="handleSelectConfirm"></nf-user-select>
+    <nf-user-select
+      ref="user-select"
+      check-type="checkbox"
+      :user-url="userUrl"
+      :custom-option="customOption"
+      :default-checked="defaultChecked"
+      @onConfirm="handleSelectConfirm"
+    ></nf-user-select>
 
-    <nf-dept-select ref="dept-select"
-                    :url="deptUrl"
-                    :custom-option="customOption"
-                    :default-checked="defaultChecked"
-                    @confirm="handleSelectConfirm"></nf-dept-select>
+    <nf-dept-select
+      ref="dept-select"
+      :url="deptUrl"
+      :custom-option="customOption"
+      :default-checked="defaultChecked"
+      @confirm="handleSelectConfirm"
+    ></nf-dept-select>
   </el-dialog>
 </template>
 <script>
@@ -150,36 +168,36 @@ export default {
     NfUserSelect, NfDeptSelect
   },
   computed: {
-    userUrl () {
+    userUrl() {
       return this.userOption.userUrl
     },
-    roleUrl () {
+    roleUrl() {
       return this.userOption.roleUrl
     },
-    deptUrl () {
+    deptUrl() {
       return this.userOption.deptUrl
     },
-    postUrl () {
+    postUrl() {
       return this.userOption.postUrl
     },
-    customUrl () {
+    customUrl() {
       return this.userOption.customUrl
     },
-    customOption () {
+    customOption() {
       return this.userOption.customOption
     },
-    roleProps () {
-      return this.customOption ? this.customOption.roleProps : null
+    roleProps() {
+      return this.customOption ? this.customOption.roleProps : { label: 'roleName', value: 'id', children: 'children', records: 'data.data' }
     },
-    deptProps () {
-      return this.customOption ? this.customOption.deptProps : null
+    deptProps() {
+      return this.customOption ? this.customOption.deptProps : { label: 'deptName', value: 'id', children: 'children', records: 'data.data' }
     },
-    postProps () {
-      return this.customOption ? this.customOption.postProps : null
+    postProps() {
+      return this.customOption ? this.customOption.postProps : { label: 'postName', value: 'id', children: 'children', records: 'data.data.records' }
     }
   },
   watch: {
-    visible (val) {
+    visible(val) {
       if (!this.init) {
         this.getRoleList()
         // this.getDeptList()
@@ -189,13 +207,13 @@ export default {
       if (val && this.userOption && this.userOption.data) {
         const data = JSON.parse(JSON.stringify(this.userOption.data))
         for (let item of data) {
-          if (['role', 'post'].includes(item.type) && typeof item.value == 'string') item.value = item.value?.split(',') || []
+          if (['role', 'post', 'platform'].includes(item.type) && typeof item.value == 'string') item.value = item.value?.split(',') || []
         }
         this.data = data
       }
     },
   },
-  data () {
+  data() {
     return {
       switchAll: false,
       init: false,
@@ -250,51 +268,90 @@ export default {
     }
   },
   methods: {
-    handleSelect (index, ref) {
+    handleSelect(index, ref) {
       this.selectIndex = index
       this.defaultChecked = this.data[index].value
       this.$refs[ref].visible = true
     },
-    handleSelectConfirm (id, name) {
+    handleSelectConfirm(id, name) {
       this.data[this.selectIndex].value = id
       this.data[this.selectIndex].text = name
     },
-    handleTypeChange (index) {
+    handleTypeChange(index) {
       const type = this.data[index].type
       this.data[index] = {
         type,
-        value: ['role', 'post'].includes(type) ? [] : ''
+        value: ['role', 'post', 'platform'].includes(type) ? [] : ''
       }
     },
-    handleChange (index, ref) {
-      this.$nextTick(() => {
-        const text = this.$refs[ref].labelShow.join(',')
-        if (text) this.data[index].text = text
+    handleChange(index, ref) {
+      setTimeout(() => {
+        const text = this.$refs[ref].getCheckedNodes().map(n => n.label).join(',')
+        if (text)
+          this.data[index].text = text
       })
     },
-    getRoleList () {
+    getRoleList() {
       this.$axios.get(this.roleUrl).then(res => {
-        this.roleList = res.data.data
+        const { records } = this.roleProps
+        const list = this.getAsVal(res, records)
+        this.handleList(list, this.roleProps)
+        this.roleList = list
       })
     },
-    getDeptList () {
+    getDeptList() {
       this.$axios.get(this.deptUrl).then(res => {
-        this.deptList = res.data.data
+        const { records } = this.deptProps
+        const list = this.getAsVal(res, records)
+        this.handleList(list, this.deptProps)
+        this.deptList = list
       })
     },
-    getPostList () {
-      this.$axios.get(this.postUrl, { current: 1, size: 999 }).then(res => {
-        this.postList = res.data.data.records
+    getPostList() {
+      this.$axios.get(this.postUrl, { params: { size: -1 } }).then(res => {
+        const { records } = this.postProps
+        const list = this.getAsVal(res, records)
+        this.handleList(list, this.postProps)
+        this.postList = list
       })
     },
-    handleSubmit () {
-      this.$emit('submit', this.data.filter(d => d.type && d.value), this.switchAll)
+    handleSubmit() {
+      let result = this.data.filter(d => d.type && d.value)
+      result = result.map(item => {
+        if (['role', 'post', 'platform'].includes(item.type)) {
+          item.value = item.value.join(',')
+        }
+        return item
+      })
+      this.$emit('submit', result, this.switchAll)
       this.visible = false
     },
-    handleClose (done) {
+    handleClose(done) {
       this.visible = false
       if (done && typeof done == 'function') done()
-    }
+    },
+    getAsVal(obj, bind = '') {
+      let result = this.deepClone(obj)
+      if (this.validateNull(bind)) return result
+      bind.split('.').forEach(ele => {
+        if (!this.validateNull(result[ele])) {
+          result = result[ele]
+        } else {
+          result = ''
+        }
+      });
+      return result
+    },
+    handleList(list, props) {
+      for (let item of list) {
+        item.label = item[props.label]
+        item.value = item[props.value]
+        if (item[props.children]) {
+          item.children = item[props.children]
+          this.handleList(item.children, props)
+        }
+      }
+    },
   }
 }
 </script>