feat: [试验管理] 界面优化

src/api/system/user.js

@@ -143,3 +143,11 @@ export function checkStatus(query) {
     params: query
   })
 }
+
+// 查询部门+用户列表
+export function deptUserList() {
+  return request({
+    url: '/system/user/deptUserList',
+    method: 'get'
+  })
+}

src/views/business/comps/select/SelectDeptUser.vue

@@ -0,0 +1,90 @@
+<!-- 选择部门 -->
+<template>
+  <treeselect 
+    ref="treeselectRef" 
+    v-model="selected" 
+    :options="list" 
+    :show-count="true" 
+    :disabled="readonly" 
+    :placeholder="$t('form.placeholderSelect')" 
+    @select="handleChange" 
+    :normalizer="normalizer"
+    :style="{width:width}" />
+  <!-- :flat="true" -->
+</template>
+
+<script>
+import Treeselect from "@riophae/vue-treeselect"
+import { deptUserList } from "@/api/system/user"
+import "@riophae/vue-treeselect/dist/vue-treeselect.css"
+export default {
+  name: "SelectDept",
+  components: {Treeselect},
+  props: {
+    value: {
+      type: [Number, String , Array],
+      default: null,
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    width:{
+      type:String,
+      default:'100%'
+    }
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler(v) {
+        debugger
+        this.selected = v?((v+'').indexOf('u_')>-1? v:('u_'+v)):null
+      }
+    },
+  },
+  data() {
+    return {
+      selected: null,
+      list: [],
+    };
+  },
+  mounted() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      this.list = []
+      deptUserList().then(response => {
+        // response.data.forEach(element => {
+        //   element.isDisabled = element.type!==7
+        // })
+        this.list = this.handleTree(response.data, "id")
+      })
+    },
+    handleChange(val) {
+      if(val){
+        if(val.type!==7){
+          this.$message.error(`只能选择人员`)
+          this.selected = null
+          this.$refs.treeselectRef.clear();
+        }else{
+          this.$emit('input', val.id? val.id.split('_')[1] : '')
+          this.$emit('change', val.id? val.id.split('_')[1] : '')
+        }
+      }
+    },
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
+      return {
+        id: node.id,
+        label: node.name,
+        children: node.children,
+        // isDisabled:node.isDisabled
+      };
+    },
+  }
+};
+</script>

src/views/business/study/comp/edit.vue

@@ -12,26 +12,27 @@
       </div>
     </div>
     <div class="edit-content">
-      <el-form ref="infoDialogForm" :model="infoDialog.formData" :rules="infoDialog.rules" label-width="100px" class="edit-form">
+      <el-form ref="infoDialogForm" :model="infoDialog.formData" :rules="infoDialog.rules" label-width="150px" class="edit-form">
         <el-row>
           <el-col :span="24">
             <el-form-item :label="$t('page.business.study.name')+'：'" prop="name">
-              <el-input v-model="infoDialog.formData.name" :placeholder="$t('form.placeholderInput')" />
+              <el-input v-model="infoDialog.formData.name" :placeholder="$t('form.placeholderInput')" maxlength="100" />
             </el-form-item>
           </el-col>
           <el-col :span="24">
             <el-form-item :label="$t('page.business.study.sn')+'：'" prop="sn">
-              <el-input v-model="infoDialog.formData.sn" :placeholder="$t('form.placeholderInput')" />
+              <el-input v-model="infoDialog.formData.sn" :placeholder="$t('form.placeholderInput')" maxlength="100" />
             </el-form-item>
           </el-col>
           <el-col :span="24">
             <el-form-item :label="$t('page.business.study.leader')+'：'" prop="leader">
-              <el-input v-model="infoDialog.formData.leader" :placeholder="$t('form.placeholderInput')" />
+              <!-- <el-input v-model="infoDialog.formData.leader" :placeholder="$t('form.placeholderInput')" /> -->
+              <SelectDeptUser v-model="infoDialog.formData.leader" />
             </el-form-item>
           </el-col>
           <el-col :span="24">
             <el-form-item :label="$t('page.business.study.remark')+'：'" prop="remark">
-              <el-input type="textarea" :rows="5" :placeholder="$t('form.placeholderInput')" v-model="infoDialog.formData.remark"> </el-input>
+              <el-input type="textarea" :rows="5" :placeholder="$t('form.placeholderInput')" v-model="infoDialog.formData.remark" maxlength="500" show-word-limit> </el-input>
             </el-form-item>
           </el-col>
         </el-row>
@@ -42,7 +43,7 @@
 
 <script>
 import { study_info,study_save} from "@/api/business/study/study";
-import SelectDept from '../../comps/select/SelectDept.vue';
+import SelectDeptUser from '../../comps/select/SelectDeptUser.vue';
 const EmptyDialogData = {
   id:'',
   name:'',
@@ -55,7 +56,7 @@ export default {
   props:{
   },
   components:{
-    SelectDept
+    SelectDeptUser
   },
   computed: {
   },