四性检测 / 流程管理

src/assets/iconfonts/light/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 3966148 */
-  src: url('iconfont.woff2?t=1681870503932') format('woff2'),
-       url('iconfont.woff?t=1681870503932') format('woff'),
-       url('iconfont.ttf?t=1681870503932') format('truetype');
+  src: url('iconfont.woff2?t=1682583233390') format('woff2'),
+       url('iconfont.woff?t=1682583233390') format('woff'),
+       url('iconfont.ttf?t=1682583233390') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-tupianyulan:before {
+  content: "\e644";
+}
+
 .icon-fabu:before {
   content: "\e643";
 }

src/assets/iconfonts/light/iconfont.json

@@ -5,6 +5,13 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "35165878",
+      "name": "图片预览",
+      "font_class": "tupianyulan",
+      "unicode": "e644",
+      "unicode_decimal": 58948
+    },
     {
       "icon_id": "35119672",
       "name": "发布",

src/views/system/fourCharacterDetection/index.vue

@@ -30,71 +30,6 @@
         <div class="container-right">
           <span class="right-top-line" />
           <span class="left-bottom-line" />
-          <!--表单渲染-->
-          <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title">
-            <!-- <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="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="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="number">
-                  <el-input v-model="form.number" />
-                </el-form-item>
-                <el-form-item label="检测项目" prop="item">
-                  <el-input v-model="form.email" />
-                </el-form-item>
-                <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>
-              <div slot="footer" class="dialog-footer">
-                <el-button type="text" @click="crud.cancelCU">取消</el-button>
-                <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确定</el-button>
-              </div>
-            </div>
-          </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 type="selection" align="center" width="55" />
@@ -117,23 +52,43 @@
         </div>
       </div>
     </div>
-
+    <!--表单渲染-->
+    <eForm ref="eform" />
+    <el-dialog class="tip-dialog tip-middle-dialog" title="操作提示" :visible.sync="verifyDialogVisible" :before-close="handleClose">
+      <div class="setting-dialog">
+        <div class="tip-content">
+          <p class="tipMsg">这里为技术人员维护系统时使用，普通用户无需设置</p>
+          <p class="delt-tip"><span>注意：强行修改会导致系统数据异常或丢失！如因用户强行修改，本系统不负责因此导致的相关后果！</span></p>
+        </div>
+        <el-form :model="form" style="margin-top:30px;" @submit.native.prevent>
+          <el-form-item label="维护验证码" label-width="110px">
+            <el-input v-model="form.verifyCode" show-password style="width: 480px;" />
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="verifyDialogVisible=false">取消 </el-button>
+          <el-button type="primary" @click.native="handleConfirm">确定</el-button>
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import crudUser from '@/api/system/user'
-import CRUD, { presenter, header, form, crud } from '@crud/crud'
+import { verifyMaintenance } from '@/api/archivesConfig/field'
+import { encrypt } from '@/utils/rsaEncrypt'
+import CRUD, { presenter, header, crud } from '@crud/crud'
 import rrOperation from '@crud/RR.operation'
 import crudOperation from '@crud/CRUD.operation'
 import pagination from '@crud/Pagination'
 import dataJson from './data.json'
-const defaultForm = { id: null, oneLevel: null, twoLevel: null, number: null, item: null, purpose: null, object: null, basis: null, method: null, isOpen: '1' }
+import eForm from './module/form'
 export default {
   name: 'FourCharacterDetection',
-  components: { crudOperation, rrOperation, pagination },
+  components: { crudOperation, rrOperation, pagination, eForm },
   cruds() {
-    return CRUD({ title: '用户', url: 'api/users', crudMethod: { ...crudUser }, optShow: {
+    return CRUD({ title: '四性检测项目', url: 'api/users', crudMethod: { ...crudUser }, optShow: {
       add: true,
       edit: true,
       del: false,
@@ -141,25 +96,16 @@ export default {
       group: false
     }})
   },
-  mixins: [presenter(), header(), form(defaultForm), crud()],
-  // 数据字典
-  dicts: ['user_status'],
+  mixins: [presenter(), header(), crud()],
   data() {
     return {
       fixedStatus: true,
-      options: [{
-        value: '选项1',
-        label: '真实性检测'
-      }, {
-        value: '选项2',
-        label: '完整性检测'
-      }, {
-        value: '选项3',
-        label: '可用性检测'
-      }, {
-        value: '选项4',
-        label: '安全性检测'
-      }],
+      verifyDialogVisible: false,
+      form: {
+        verifyCode: ''
+      },
+      showVerifyDialog: true,
+      btn: '',
       defaultProps: { children: 'children', label: 'name', isLeaf: 'leaf' },
       permission: {
         add: ['admin', 'user:add'],
@@ -169,33 +115,7 @@ export default {
       enabledTypeOptions: [
         { key: 'true', display_name: '启用中' },
         { key: 'false', display_name: '停用中' }
-      ],
-      rules: {
-        oneLevel: [
-          { required: true, trigger: 'change', message: '请选择一级分类' }
-        ],
-        twoLevel: [
-          { required: true, trigger: 'change', message: '请选择二级分类' }
-        ],
-        number: [
-          { required: true, message: '检测编号不可为空', trigger: 'blur' }
-        ],
-        item: [
-          { required: true, message: '检测项目不可为空', trigger: 'blur' }
-        ],
-        purpose: [
-          { required: true, message: '检测目的不可为空', trigger: 'blur' }
-        ],
-        object: [
-          { required: true, message: '检测对象不可为空', trigger: 'blur' }
-        ],
-        basis: [
-          { required: true, message: '依据和方法不可为空', trigger: 'blur' }
-        ],
-        isOpen: [
-          { required: true, message: '请选择是否开启', trigger: 'change' }
-        ]
-      }
+      ]
     }
   },
   computed: {
@@ -207,11 +127,14 @@ export default {
     this.fixedStatus = JSON.parse(localStorage.getItem('statusFourFixed')) === true
   },
   methods: {
-    statusBarChecked(val) {
-      localStorage.setItem('statusFourFixed', val)
-    },
-    clickRowHandler(row) {
-      // this.$refs.table.toggleRowSelection(row) // 单击选中
+
+    [CRUD.HOOK.beforeToCU](crud, form, btn) {
+      if (this.showVerifyDialog) {
+        // 打开输入验证码对话框
+        this.verifyDialogVisible = true
+        this.btn = btn
+        return false
+      }
     },
     // 新增与编辑前做的操作
     [CRUD.HOOK.afterToCU](crud, form) {
@@ -227,6 +150,35 @@ export default {
     },
     // tree
     handleNodeClick(data) {
+    },
+    handleConfirm() {
+      verifyMaintenance(encrypt(this.form.verifyCode)).then((res) => {
+        if (res) {
+          // 关闭输入验证码对话框
+          this.verifyDialogVisible = false
+          this.form.verifyCode = ''
+          this.showVerifyDialog = false
+          if (this.btn === 'add') {
+            this.crud.toAdd()
+          } else if (this.btn === 'edit') {
+            this.crud.toEdit(this.crud.selections[0])
+          }
+          this.showVerifyDialog = true
+        } else {
+          this.$message.error('验证码错误！')
+        }
+      })
+    },
+    handleClose(done) {
+      this.form.verifyCode = ''
+      done()
+    },
+    clickRowHandler(row) {
+      this.$refs.table.clearSelection()
+      this.$refs.table.toggleRowSelection(row)
+    },
+    statusBarChecked(val) {
+      localStorage.setItem('statusFourFixed', val)
     }
   }
 }
@@ -292,8 +244,5 @@ export default {
       @include font_color($font-color-theme);
     }
   }
-}
-.el-dialog .el-dialog__body .el-form-item:nth-child(odd){
-
 }
 </style>

src/views/system/fourCharacterDetection/module/form.vue

@@ -0,0 +1,132 @@
+<template>
+  <!--表单渲染-->
+  <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title">
+    <!-- <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="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="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="number">
+          <el-input v-model="form.number" />
+        </el-form-item>
+        <el-form-item label="检测项目" prop="item">
+          <el-input v-model="form.item" />
+        </el-form-item>
+        <el-row>
+          <el-form-item label="检测目的" prop="purpose">
+            <el-input v-model="form.purpose" style="width: 580px;" />
+          </el-form-item>
+        </el-row>
+        <el-row>
+          <el-form-item label="检测对象" prop="object">
+            <el-input v-model="form.object" style="width: 580px;" />
+          </el-form-item>
+        </el-row>
+        <el-row>
+          <el-form-item label="依据和方法" prop="basis">
+            <el-input v-model="form.basis" type="textarea" style="width: 580px;" />
+          </el-form-item>
+        </el-row>
+        <el-row>
+          <el-form-item label="检测方法" prop="method">
+            <el-input v-model="form.method" style="width: 580px;" />
+          </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>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="text" @click="crud.cancelCU">取消</el-button>
+        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确定</el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { form } from '@crud/crud'
+const defaultForm = { id: null, oneLevel: null, twoLevel: null, number: null, item: null, purpose: null, object: null, basis: null, method: null, isOpen: '1' }
+export default {
+  mixins: [form(defaultForm)],
+  data() {
+    return {
+      options: [{
+        value: '选项1',
+        label: '真实性检测'
+      }, {
+        value: '选项2',
+        label: '完整性检测'
+      }, {
+        value: '选项3',
+        label: '可用性检测'
+      }, {
+        value: '选项4',
+        label: '安全性检测'
+      }],
+      rules: {
+        oneLevel: [
+          { required: true, message: '请选择一级分类', trigger: 'change' }
+        ],
+        twoLevel: [
+          { required: true, message: '请选择二级分类', trigger: 'change' }
+        ],
+        number: [
+          { required: true, message: '检测编号不可为空', trigger: 'blur' }
+        ],
+        item: [
+          { required: true, message: '检测项目不可为空', trigger: 'blur' }
+        ],
+        purpose: [
+          { required: true, message: '检测目的不可为空', trigger: 'blur' }
+        ],
+        object: [
+          { required: true, message: '检测对象不可为空', trigger: 'blur' }
+        ],
+        basis: [
+          { required: true, message: '依据和方法不可为空', trigger: 'blur' }
+        ],
+        isOpen: [
+          { required: true, message: '请选择是否开启', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  computed: {
+  },
+  created() {
+  },
+  mounted: function() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.el-dialog .el-dialog__body .el-form-item:nth-child(odd){
+  margin-right: 24px;
+}
+</style>

src/views/system/processManage/historicalProcess/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>历史流程</div>
+</template>
+
+<script>
+</script>
+
+<style lang='scss' scoped>
+</style>

src/views/system/processManage/index.vue

@@ -1,9 +1,65 @@
 <template>
-  <div>流程管理</div>
+  <div class="app-container tab-container">
+    <div class="tab-content">
+      <span class="right-top-line" />
+      <span class="left-bottom-line" />
+      <span class="right-bottom-line" />
+      <ul class="tab-nav">
+        <li :class="{ 'active-tab-nav': activeIndex == 0 }" @click="changeActiveTab(0)">流程部署<i /></li>
+        <li :class="{ 'active-tab-nav': activeIndex == 1 }" @click="changeActiveTab(1)">模型设计<i /></li>
+        <li :class="{ 'active-tab-nav': activeIndex == 2 }" @click="changeActiveTab(2)">运行中流程<i /></li>
+        <li :class="{ 'active-tab-nav': activeIndex == 3 }" @click="changeActiveTab(3)">历史流程<i /></li>
+        <!-- 最右侧装饰img -->
+        <span class="tab-right-img" />
+      </ul>
+      <component :is="comName" />
+    </div>
+  </div>
 </template>
 
 <script>
+import processDeployment from './processDeployment/index.vue'
+import modelDesign from './modelDesign/index.vue'
+import runningProcess from './runningProcess/index.vue'
+import historicalProcess from './historicalProcess/index.vue'
+
+export default {
+  name: 'ProcessManage',
+  components: {
+    processDeployment,
+    modelDesign,
+    runningProcess,
+    historicalProcess
+  },
+  data() {
+    return {
+      activeIndex: 0
+    }
+  },
+  computed: {
+    comName: function() {
+      if (this.activeIndex === 0) {
+        return 'processDeployment'
+      } else if (this.activeIndex === 1) {
+        return 'modelDesign'
+      } else if (this.activeIndex === 2) {
+        return 'runningProcess'
+      } else if (this.activeIndex === 3) {
+        return 'historicalProcess'
+      }
+      return 'processDeployment'
+    }
+  },
+  methods: {
+    changeActiveTab(data) {
+      this.activeIndex = data
+    }
+  }
+}
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
+.tab-content{
+  height: calc(100vh - 179px);
+}
 </style>

src/views/system/processManage/modelDesign/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>模型设计</div>
+</template>
+
+<script>
+</script>
+
+<style lang='scss' scoped>
+</style>

src/views/system/processManage/processDeployment/index.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="process-dep-container">
+    <div class="head-container">
+      <div class="head-left">
+        <el-button size="mini">
+          <i class="iconfont icon-xinzeng" />
+          新增
+        </el-button>
+        <el-button size="mini">
+          <i class="iconfont icon-bianji" />
+          编辑
+        </el-button>
+        <el-button size="mini">
+          <i class="iconfont icon-daochu" />
+          导出
+        </el-button>
+      </div>
+      <div class="head-right">
+        <el-button size="mini">
+          <i class="iconfont icon-jihuo" />
+          激活
+        </el-button>
+        <el-button size="mini">
+          <i class="iconfont icon-guaqi" />
+          挂起
+        </el-button>
+      </div>
+    </div>
+    <div class="process-dep-main">
+      <ul class="process-list">
+        <li>
+          <p>流程A</p>
+          <span class="process-on" />
+        </li>
+        <li>
+          <p>流程B</p>
+          <span class="process-on" />
+        </li>
+        <li>
+          <p>流程C</p>
+          <span class="process-off" />
+        </li>
+      </ul>
+      <div class="process-info">
+        <div class="process-info-txt">
+          <div class="info-left">
+            <p>当前版本：<span>1.0</span></p>
+            <p>部署时间：<span>2022-10-01 10:00:05</span></p>
+          </div>
+          <div class="info-right ">
+            <p>运行中：<span>2</span></p>
+            <p>已完成：<span>5</span></p>
+          </div>
+        </div>
+        <div class="process-info-img">
+          <img src="~@/assets/images/system/process-img.png" alt="">
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+</script>
+
+<style lang='scss' scoped>
+.process-dep-container{
+  min-height: calc(100vh - 300px);
+}
+.head-container{
+  display: flex;
+  justify-content: flex-start;
+  .head-left{
+    width: 342px;
+  }
+  .head-right{
+    flex: 1;
+    margin-left: 30px;
+  }
+}
+.process-dep-main{
+  display: flex;
+  justify-content: flex-start;
+  height: calc(100vh - 283px);
+  background-color: #F5F5F5 ;
+  border: 1px solid #E6E8ED;
+  .process-list{
+    width: 342px;
+    background-color: #fff;
+    box-shadow: 4px 0px 4px 0px rgba(0,0,0,0.04);
+    li{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 16px;
+      font-size: 14px;
+      height: 40px;
+      line-height: 40px;
+      color: #0C0E1E;
+      cursor: pointer;
+      p{
+        flex: 1;
+      }
+      span{
+        display: block;
+        width: 9px;
+        height: 9px;
+        border-radius: 50%;
+        &.process-on{
+          background-color: #3FE246;
+        }
+        &.process-off{
+          background-color: #ED4A41;
+        }
+      }
+      &.active-li,
+      &:hover{
+        background-color: #E8F2FF;
+      }
+
+    }
+  }
+  .process-info{
+    flex: 1;
+    padding:10px 30px;
+    .process-info-txt{
+      display: flex;
+      justify-content: space-between;
+      font-size: 14px;
+      line-height: 30px;
+      color: #0C0E1E;
+      margin-bottom: 10px;
+      .info-left{
+        width: 50%;
+      }
+      .info-right{
+        width: 50%;
+        text-align: right;
+      }
+      span{
+        color: #545B65;
+      }
+    }
+    .process-info-img{
+      height: calc(100vh - 374px);
+      & img{
+        display: block;
+        height: 100%;
+        border: 1px solid #E6E8ED;
+      }
+    }
+  }
+}
+</style>
+

src/views/system/processManage/runningProcess/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>运行中流程</div>
+</template>
+
+<script>
+</script>
+
+<style lang='scss' scoped>
+</style>