From b432040ce62d6e84f4c7f77624079984d5f31475 Mon Sep 17 00:00:00 2001
From: xuhuajiao <13476289682@163.com>
Date: Wed, 26 Apr 2023 17:30:32 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=9B=E6=80=A7=E6=A3=80=E6=B5=8B=E5=BC=B9?=
 =?UTF-8?q?=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../system/fourCharacterDetection/index.vue   | 385 +++++-------------
 1 file changed, 106 insertions(+), 279 deletions(-)

diff --git a/src/views/system/fourCharacterDetection/index.vue b/src/views/system/fourCharacterDetection/index.vue
index a2954f4..b50b4c7 100644
--- a/src/views/system/fourCharacterDetection/index.vue
+++ b/src/views/system/fourCharacterDetection/index.vue
@@ -6,7 +6,7 @@
         <div class="container-left">
           <span class="right-top-line" />
           <span class="left-bottom-line" />
-          <el-tree :data="fourDatas" :props="defaultProps" :expand-on-click-node="false" highlight-current :default-expanded-keys="[1]" :default-checked-keys="[1]" @node-click="handleNodeClick" />
+          <el-tree :data="fourDatas" :props="defaultProps" node-key="id" :expand-on-click-node="false" highlight-current :default-expanded-keys="[1]" :default-checked-keys="[1]" @node-click="handleNodeClick" />
         </div>
       </div>
       <!--用户数据-->
@@ -35,41 +35,59 @@
             <!-- <span class="dialog-right-top" />
             <span class="dialog-left-bottom" /> -->
             <div class="setting-dialog">
-              <el-form ref="form" :inline="true" :model="form" :rules="rules" label-width="90px">
-                <el-form-item label="账号" prop="username">
-                  <el-input v-model="form.username" @keydown.native="keydown($event)" />
+              <el-form ref="form" :inline="true" :model="form" :rules="rules" label-width="100px">
+                <el-form-item label="一级分类" prop="oneLevel">
+                  <el-select v-model="form.oneLevel" placeholder="请选择" style="width:225px;">
+                    <el-option
+                      v-for="item in options"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    />
+                  </el-select>
                 </el-form-item>
-                <el-form-item label="电话" prop="phone">
-                  <el-input v-model.number="form.phone" />
+                <el-form-item label="二级分类" prop="twoLevel">
+                  <el-select v-model="form.twoLevel" placeholder="请选择" style="width:225px;">
+                    <el-option
+                      v-for="item in options"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    />
+                  </el-select>
                 </el-form-item>
-                <el-form-item label="用户名" prop="nickName">
-                  <el-input v-model="form.nickName" @keydown.native="keydown($event)" />
+                <el-form-item label="检测编号" prop="number">
+                  <el-input v-model="form.number" />
                 </el-form-item>
-                <el-form-item label="邮箱" prop="email">
+                <el-form-item label="检测项目" prop="item">
                   <el-input v-model="form.email" />
                 </el-form-item>
-                <el-form-item label="所属全宗" prop="dept.id">
-                  <treeselect v-model="form.dept.id" :options="depts" placeholder="选择全宗" />
-                </el-form-item>
-                <el-form-item label="所属部门" prop="dept.id">
-                  <treeselect v-model="form.dept.id" :options="depts" :load-options="loadDepts" placeholder="选择部门" />
-                </el-form-item>
-                <el-form-item label="性别" prop="gender">
-                  <el-radio-group v-model="form.gender">
-                    <el-radio label="男">男</el-radio>
-                    <el-radio label="女">女</el-radio>
-                  </el-radio-group>
-                </el-form-item>
-                <el-form-item label="状态" prop="enabled">
-                  <el-radio-group v-model="form.enabled" :disabled="form.id === user.id">
-                    <el-radio v-for="item in dict.user_status" :key="item.id" :label="item.value">{{ item.label }}</el-radio>
+                <el-row>
+                  <el-form-item label="检测目的" prop="purpose">
+                    <el-input v-model="form.purpose" style="width: 584px;" />
+                  </el-form-item>
+                </el-row>
+                <el-row>
+                  <el-form-item label="检测对象" prop="object">
+                    <el-input v-model="form.object" style="width: 584px;" />
+                  </el-form-item>
+                </el-row>
+                <el-row>
+                  <el-form-item label="依据和方法" prop="basis">
+                    <el-input v-model="form.basis" type="textarea" style="width: 584px;" />
+                  </el-form-item>
+                </el-row>
+                <el-row>
+                  <el-form-item label="检测方法" prop="method">
+                    <el-input v-model="form.method" style="width: 584px;" />
+                  </el-form-item>
+                </el-row>
+                <el-form-item label="是否开启" prop="isOpen">
+                  <el-radio-group v-model="form.isOpen">
+                    <el-radio label="1">是</el-radio>
+                    <el-radio label="0">否</el-radio>
                   </el-radio-group>
                 </el-form-item>
-                <el-form-item style="margin-bottom: 0;" label="角色" prop="roles" class="is-required selecct-dropdown">
-                  <el-select v-model="roleDatas" style="width: 584x" multiple placeholder="请选择" :popper-append-to-body="false" @remove-tag="deleteTag" @change="changeRole">
-                    <el-option v-for="item in roles" :key="item.name" :disabled="level !== 1 && item.level <= level" :label="item.name" :value="item.id" />
-                  </el-select>
-                </el-form-item>
               </el-form>
               <div slot="footer" class="dialog-footer">
                 <el-button type="text" @click="crud.cancelCU">取消</el-button>
@@ -79,17 +97,16 @@
           </el-dialog>
           <!--表格渲染-->
           <el-table ref="table" v-loading="crud.loading" class="fixed-table" :data="crud.data" style="width: 100%;" @row-click="clickRowHandler" @selection-change="crud.selectionChangeHandler">
-            <el-table-column :selectable="checkboxT" type="selection" align="center" width="55" />
-            <el-table-column :show-overflow-tooltip="true" prop="username" label="一级分类" width="140" />
-            <el-table-column :show-overflow-tooltip="true" prop="nickName" label="二级分类" width="200" />
-            <el-table-column :show-overflow-tooltip="true" prop="gender" label="检测编号" width="100" />
-            <el-table-column :show-overflow-tooltip="true" prop="phone" label="检测项目" width="340" />
-            <el-table-column :show-overflow-tooltip="true" prop="email" label="检测目的" width="340" />
-            <el-table-column :show-overflow-tooltip="true" prop="dept" label="检测对象" width="160" />
-            <el-table-column :show-overflow-tooltip="true" prop="dept" label="依据和方法" width="140" />
-            <el-table-column :show-overflow-tooltip="true" prop="dept" label="检测类" width="140" />
-            <!-- :fixed="fixedStatus ? false : 'right' " -->
-            <el-table-column class="state-right" label="状态" align="center" width="120" prop="enabled" fixed="right">
+            <el-table-column type="selection" align="center" width="55" />
+            <el-table-column :show-overflow-tooltip="true" prop="oneLevel" label="一级分类" width="140" />
+            <el-table-column :show-overflow-tooltip="true" prop="twoLevel" label="二级分类" width="200" />
+            <el-table-column :show-overflow-tooltip="true" prop="number" label="检测编号" width="100" />
+            <el-table-column :show-overflow-tooltip="true" prop="item" label="检测项目" width="340" />
+            <el-table-column :show-overflow-tooltip="true" prop="object" label="检测目的" width="340" />
+            <el-table-column :show-overflow-tooltip="true" prop="basis" label="检测对象" width="160" />
+            <el-table-column :show-overflow-tooltip="true" prop="method" label="依据和方法" width="140" />
+            <el-table-column :show-overflow-tooltip="true" prop="type" label="检测类" width="140" />
+            <el-table-column class="state-right" label="状态" align="center" width="108" prop="enabled" :fixed="fixedStatus ? false : 'right' ">
               <template slot-scope="scope">
                 <span :class="['row-state', scope.row.enabled ? 'active-state': 'disabled-state']">{{ scope.row.enabled ? '启用中': '停用中' }}</span>
               </template>
@@ -106,26 +123,15 @@
 
 <script>
 import crudUser from '@/api/system/user'
-import { isvalidPhone } from '@/utils/validate'
-import { getDepts, getDeptSuperior } from '@/api/system/dept'
-import { getAll, getLevel } from '@/api/system/role'
-import { getAllJob } from '@/api/system/job'
 import CRUD, { presenter, header, form, crud } from '@crud/crud'
 import rrOperation from '@crud/RR.operation'
 import crudOperation from '@crud/CRUD.operation'
-// import udOperation from '@crud/UD.operation'
 import pagination from '@crud/Pagination'
-import Treeselect from '@riophae/vue-treeselect'
-import { mapGetters } from 'vuex'
-import '@riophae/vue-treeselect/dist/vue-treeselect.css'
-import { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
 import dataJson from './data.json'
-let userRoles = []
-let userJobs = []
-const defaultForm = { id: null, username: null, nickName: null, gender: '男', email: null, enabled: 'true', roles: [], jobs: [], dept: { id: null }, phone: null }
+const defaultForm = { id: null, oneLevel: null, twoLevel: null, number: null, item: null, purpose: null, object: null, basis: null, method: null, isOpen: '1' }
 export default {
   name: 'FourCharacterDetection',
-  components: { Treeselect, crudOperation, rrOperation, pagination },
+  components: { crudOperation, rrOperation, pagination },
   cruds() {
     return CRUD({ title: '用户', url: 'api/users', crudMethod: { ...crudUser }, optShow: {
       add: true,
@@ -139,23 +145,21 @@ export default {
   // 数据字典
   dicts: ['user_status'],
   data() {
-    // 自定义验证
-    const validPhone = (rule, value, callback) => {
-      if (!value) {
-        callback(new Error('请输入电话号码'))
-      } else if (!isvalidPhone(value)) {
-        callback(new Error('请输入正确的11位手机号码'))
-      } else {
-        callback()
-      }
-    }
     return {
       fixedStatus: true,
-      height: document.documentElement.clientHeight - 180 + 'px;',
-      deptName: '', depts: [],
-      fourDatas: [],
-      jobs: [], level: 3, roles: [],
-      jobDatas: [], roleDatas: [], // 多选时使用
+      options: [{
+        value: '选项1',
+        label: '真实性检测'
+      }, {
+        value: '选项2',
+        label: '完整性检测'
+      }, {
+        value: '选项3',
+        label: '可用性检测'
+      }, {
+        value: '选项4',
+        label: '安全性检测'
+      }],
       defaultProps: { children: 'children', label: 'name', isLeaf: 'leaf' },
       permission: {
         add: ['admin', 'user:add'],
@@ -167,46 +171,39 @@ export default {
         { key: 'false', display_name: '停用中' }
       ],
       rules: {
-        username: [
-          { required: true, message: '请输入用户名', trigger: 'blur' },
-          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
+        oneLevel: [
+          { required: true, trigger: 'change', message: '请选择一级分类' }
         ],
-        nickName: [
-          { required: true, message: '请输入用户昵称', trigger: 'blur' },
-          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
+        twoLevel: [
+          { required: true, trigger: 'change', message: '请选择二级分类' }
         ],
-        email: [
-          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
-          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
+        number: [
+          { required: true, message: '检测编号不可为空', trigger: 'blur' }
         ],
-        phone: [
-          { required: true, trigger: 'blur', validator: validPhone }
+        item: [
+          { required: true, message: '检测项目不可为空', trigger: 'blur' }
         ],
-        'dept.id': [
-          { required: true, trigger: 'blur', message: '请选择部门' }
+        purpose: [
+          { required: true, message: '检测目的不可为空', trigger: 'blur' }
         ],
-        gender: [
-          { required: true, trigger: 'change', message: '请选择性别' }
+        object: [
+          { required: true, message: '检测对象不可为空', trigger: 'blur' }
         ],
-        enabled: [
-          { required: true, trigger: 'change', message: '请选择状态' }
+        basis: [
+          { required: true, message: '依据和方法不可为空', trigger: 'blur' }
+        ],
+        isOpen: [
+          { required: true, message: '请选择是否开启', trigger: 'change' }
         ]
       }
     }
   },
   computed: {
-    ...mapGetters([
-      'user'
-    ])
   },
   created() {
     this.fourDatas = dataJson
   },
   mounted: function() {
-    const that = this
-    window.onresize = function temp() {
-      that.height = document.documentElement.clientHeight - 180 + 'px;'
-    }
     this.fixedStatus = JSON.parse(localStorage.getItem('statusFourFixed')) === true
   },
   methods: {
@@ -216,211 +213,29 @@ export default {
     clickRowHandler(row) {
       // this.$refs.table.toggleRowSelection(row) // 单击选中
     },
-    // 禁止输入空格
-    keydown(e) {
-      if (e.keyCode === 32) {
-        e.returnValue = false
-      }
-    },
-    changeRole(value) {
-      userRoles = []
-      value.forEach(function(data, index) {
-        const role = { id: data }
-        userRoles.push(role)
-      })
-    },
-    changeJob(value) {
-      userJobs = []
-      value.forEach(function(data, index) {
-        const job = { id: data }
-        userJobs.push(job)
-      })
-    },
-    deleteTag(value) {
-      userRoles.forEach(function(data, index) {
-        if (data.id === value) {
-          userRoles.splice(index, value)
-        }
-      })
-    },
     // 新增与编辑前做的操作
     [CRUD.HOOK.afterToCU](crud, form) {
-      this.getRoles()
-      if (form.id == null) {
-        this.getDepts()
-      } else {
-        this.getSupDepts(form.dept.id)
-      }
-      this.getRoleLevel()
-      this.getJobs()
-      form.enabled = form.enabled.toString()
     },
     // 新增前将多选的值设置为空
     [CRUD.HOOK.beforeToAdd]() {
-      this.jobDatas = []
-      this.roleDatas = []
     },
-    // 初始化编辑时候的角色与岗位
+    // 初始化编辑
     [CRUD.HOOK.beforeToEdit](crud, form) {
-      this.getJobs(this.form.dept.id)
-      this.jobDatas = []
-      this.roleDatas = []
-      userRoles = []
-      userJobs = []
-      const _this = this
-      form.roles.forEach(function(role, index) {
-        _this.roleDatas.push(role.id)
-        const rol = { id: role.id }
-        userRoles.push(rol)
-      })
-      form.jobs.forEach(function(job, index) {
-        _this.jobDatas.push(job.id)
-        const data = { id: job.id }
-        userJobs.push(data)
-      })
     },
     // 提交前做的操作
     [CRUD.HOOK.afterValidateCU](crud) {
-      if (!crud.form.dept.id) {
-        this.$message({
-          message: '部门不能为空',
-          type: 'warning'
-        })
-        return false
-      } else if (this.jobDatas.length === 0) {
-        this.$message({
-          message: '岗位不能为空',
-          type: 'warning'
-        })
-        return false
-      } else if (this.roleDatas.length === 0) {
-        this.$message({
-          message: '角色不能为空',
-          type: 'warning'
-        })
-        return false
-      }
-      crud.form.roles = userRoles
-      crud.form.jobs = userJobs
-      return true
     },
-    // 获取左侧部门数据
-    getDeptDatas(node, resolve) {
-      const sort = 'id,desc'
-      const params = { sort: sort }
-      if (typeof node !== 'object') {
-        if (node) {
-          params['name'] = node
-        }
-      } else if (node.level !== 0) {
-        params['pid'] = node.data.id
-      }
-      setTimeout(() => {
-        getDepts(params).then(res => {
-          if (resolve) {
-            resolve(res.content)
-          } else {
-            this.deptDatas = res.content
-          }
-        })
-      }, 100)
-    },
-    getDepts() {
-      getDepts({ enabled: true }).then(res => {
-        this.depts = res.content.map(function(obj) {
-          if (obj.hasChildren) {
-            obj.children = null
-          }
-          return obj
-        })
-      })
-    },
-    getSupDepts(deptId) {
-      getDeptSuperior(deptId).then(res => {
-        const date = res.content
-        this.buildDepts(date)
-        this.depts = date
-      })
-    },
-    buildDepts(depts) {
-      depts.forEach(data => {
-        if (data.children) {
-          this.buildDepts(data.children)
-        }
-        if (data.hasChildren && !data.children) {
-          data.children = null
-        }
-      })
-    },
-    // 获取弹窗内部门数据
-    loadDepts({ action, parentNode, callback }) {
-      if (action === LOAD_CHILDREN_OPTIONS) {
-        getDepts({ enabled: true, pid: parentNode.id }).then(res => {
-          parentNode.children = res.content.map(function(obj) {
-            if (obj.hasChildren) {
-              obj.children = null
-            }
-            return obj
-          })
-          setTimeout(() => {
-            callback()
-          }, 200)
-        })
-      }
-    },
-    // 切换部门
+    // tree
     handleNodeClick(data) {
-      if (data.pid === 0) {
-        this.query.deptId = null
-      } else {
-        this.query.deptId = data.id
-      }
-      this.crud.toQuery()
-    },
-    // 改变状态
-    changeEnabled(data, val) {
-      // '此操作将 "' + this.dict.label.user_status[val] + '" ' + data.username + ', 你是否继续？',
-      this.$confirm('此操作将禁用 / 启用用户 “' + data.username + '”' + '<span>你是否还要继续？</span>', '提示', {
-        confirmButtonText: '继续',
-        cancelButtonText: '取消',
-        type: 'warning',
-        dangerouslyUseHTMLString: true
-      }).then(() => {
-        crudUser.edit(data).then(res => {
-          this.crud.notify(this.dict.label.user_status[val] + '成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
-        }).catch(() => {
-          data.enabled = !data.enabled
-        })
-      }).catch(() => {
-        data.enabled = !data.enabled
-      })
-    },
-    // 获取弹窗内角色数据
-    getRoles() {
-      getAll().then(res => {
-        this.roles = res
-      }).catch(() => { })
-    },
-    // 获取弹窗内岗位数据
-    getJobs() {
-      getAllJob().then(res => {
-        this.jobs = res.content
-      }).catch(() => { })
-    },
-    // 获取权限级别
-    getRoleLevel() {
-      getLevel().then(res => {
-        this.level = res.level
-      }).catch(() => { })
-    },
-    checkboxT(row, rowIndex) {
-      return row.id !== this.user.id
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+@import "~@/assets/styles/mixin.scss";
+@import "~@/assets/styles/variables.scss";
+
 @mixin table-fixed-status-style{
   [data-theme="dark"] & {
     &.active-state{
@@ -446,6 +261,9 @@ export default {
     }
   }
 }
+[data-theme=dark] .elect-cont-left .container-left {
+    min-height: calc(100vh - 158px);
+}
 .head-container{
   position: relative;
 }
@@ -468,5 +286,14 @@ export default {
   border-radius: 3px;
   @include table-fixed-status-style;
 }
+.hide-bar{
+  ::v-deep .el-checkbox{
+    .el-checkbox__label{
+      @include font_color($font-color-theme);
+    }
+  }
+}
+.el-dialog .el-dialog__body .el-form-item:nth-child(odd){
 
+}
 </style>