feat(模板管理): 添加接收人类型和接收人选择功能

src/views/notifyManage/templateManage/components/addOrEditDialog.vue

@@ -33,6 +33,32 @@
           placeholder="请输入排序"
         />
       </el-form-item>
+      <el-form-item label="接收人类型:" prop="recipientType">
+        <el-select
+          :disabled="dialogType=='view'"
+          v-model="formData.recipientType"
+          placeholder="请选择接收人类型"
+          @change="handleRecipientTypeChange"
+        >
+          <el-option
+            v-for="item in recipientTypeOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item v-if="formData.recipientType != 0" label="接收人:" prop="recipient">
+        <role-select v-if="formData.recipientType == 2" v-model="formData.recipient" />
+        <el-input
+          v-if="formData.recipientType == 1"
+          clearable
+          :disabled="dialogType=='view'"
+          v-model="formData.recipientName"
+          placeholder="请选择"
+          @click.native="handleRecipientClick"
+        />
+      </el-form-item>
       <el-form-item label="模板内容:" prop="content">
         <el-input
           clearable
@@ -63,22 +89,47 @@
       <el-button type="primary" :loading="loading" @click="save">确认</el-button>
       <el-button @click="closeDialog">返回</el-button>
     </template>
+    <staffSelection
+      ref="staffSelection"
+      @confirm="confirmStaffSelection"
+    ></staffSelection>
   </ele-modal>
 </template>
 
 <script>
 import dictMixins from '@/mixins/dictMixins';
 import {notifyTemplateGetByIdAPI, notifyTemplateSaveAPI, notifyTemplateUpdateAPI} from "@/api/notifyManage";
-
+import RoleSelect from '@/views/system/user/components/role-select.vue';
+import staffSelection from '@/views/enterpriseModel/dept/components/staffSelection.vue';
+import { getlistRole } from '@/api/system/role';
 export default {
   name: 'addOrEditDialog',
   props: {
     addOrEditDialogFlag: [Boolean],
   },
+  components: {
+    RoleSelect,
+    staffSelection
+  },
   mixins: [dictMixins],
   data() {
 
     return {
+      recipientTypeOptions: [
+        {
+          value: 0,
+          label: '业务自定义'
+        },
+        {
+          value: 1,
+          label: '指定人'
+        },
+        {
+          value: 2,
+          label: '指定角色'
+        },
+      ],
+      users: [],
       // 表单数据
       formData: {
         code: '',
@@ -87,57 +138,111 @@ export default {
         content: '',
         status: 1,
         remark: '',
+        recipientType: 0,
+        recipient: [],
+        recipientName: ''
       },
       title: null,
 
 
-      // 表单验证规则
-      rules: {
-        name: [
-          {
-            required: true,
-            message: '请输入模板名称',
-            trigger: 'blur'
-          }
-        ],
-        code: [
-          {
-            required: true,
-            message: '请输入模板型编码',
-            trigger: 'blur'
-          }
-        ],
-        nickname: [
-          {
-            required: true,
-            message: '请输入默认发送人',
-            trigger: 'blur'
-          }
-        ],
-        content: [
-          {
-            required: true,
-            message: '请输入模板内容',
-            trigger: 'blur'
-          }
-        ],
-        status: [
-          {
-            required: true,
-            message: '请选择状态',
-            trigger: 'change'
-          }
-        ],
-
-      },
+      
       dialogType: '',
       // 提交状态
       loading: false,
     };
   },
+  computed: {
+    // 表单验证规则
+      rules() {
+        return {
+          name: [
+            {
+              required: true,
+              message: '请输入模板名称',
+              trigger: 'blur'
+            }
+          ],
+          code: [
+            {
+              required: true,
+              message: '请输入模板型编码',
+              trigger: 'blur'
+            }
+          ],
+          nickname: [
+            {
+              required: true,
+              message: '请输入默认发送人',
+              trigger: 'blur'
+            }
+          ],
+          content: [
+            {
+              required: true,
+              message: '请输入模板内容',
+              trigger: 'blur'
+            }
+          ],
+          status: [
+            {
+              required: true,
+              message: '请选择状态',
+              trigger: 'change'
+            }
+          ],
+          recipientType: [
+            {
+              required: true,
+              message: '请选择接收人类型',
+              trigger: 'change'
+            }
+          ],
+          recipient: [
+            {
+              required: this.formData.recipientType == 0 ? false : true,
+              message: '请选择接收人',
+              trigger: 'change'
+            }
+          ],
+        }
+      }
+  },
   created() {
+    this.getUsers();
   },
   methods: {
+    getUsers() {
+      /* 获取角色数据 */
+      getlistRole()
+        .then((res) => {
+          this.users = res
+        .catch((e) => {
+          // this.$message.error(e.message);
+        });
+      })
+    },
+    handleRecipientTypeChange() {
+      this.formData.recipient = [];
+      this.formData.recipientName = '';
+    },
+    handleRecipientClick() {
+      this.$refs.staffSelection.open(
+          JSON.parse(JSON.stringify(this.formData.recipient))
+        );
+    },
+    
+    confirmStaffSelection(data) {
+      console.log(data);
+        this.formData.recipient = data.map(item => {
+          return {
+            ...item,
+            recipientId: item.id,
+            recipientName: item.name,
+            type: this.formData.recipientType
+          }
+        });
+        this.formData.recipientName = data.map(item => item.name).join(',');
+      },
     init(type, row = {}) {
       this.title = type == 'add' ? '新增' : '修改'
       this.dialogType = type
@@ -153,8 +258,8 @@ export default {
       this.$refs.formRef.validate(async (valid) => {
         if (!valid) return this.$message.warning('有必填项未填写，请检查');
         this.loading = true;
-        const params = {...this.formData};
 
+        const params = {...this.formData};
         const API = this.dialogType == 'add' ? notifyTemplateSaveAPI : notifyTemplateUpdateAPI
         try {
           await API(params)