常用字段管理-添加关键提示

src/views/archivesConfig/commonFields/index.vue

@@ -28,14 +28,18 @@
     </el-table>
     <!--表单渲染-->
     <eForm />
-    <!-- <el-dialog title="关键提示" :visible.sync="verifyDialogVisible" width="30%" :before-close="handleClose">
-      <span>这里为九州档案技术人员维护系统时使用，用户级无需设置。</span>
-      <span>注意：强行修改会导致系统数据异常或丢失！如因用户强行修改，本系统不负责因此导致的相关后果！</span>
+    <el-dialog title="关键提示" :visible.sync="verifyDialogVisible" width="35%" :before-close="handleClose">
+      <p><span>这里为技术人员维护系统时使用，用户无需设置</span></p>
+      <p><span style="color:red;">注意：强行修改会导致系统数据异常或丢失！如因用户强行修改，本系统不负责因此导致的相关后果！</span></p>
+      <el-form :model="form">
+        <el-form-item label="技术维护验证码" :label-width="formLabelWidth">
+          <el-input v-model="form.verifyCode" />
+        </el-form-item>
+      </el-form>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="verifyDialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="verifyDialogVisible = false">确 定</el-button>
+        <el-button type="primary" @click.native="handleConfirm">确 定</el-button>
       </span>
-    </el-dialog> -->
+    </el-dialog>
   </div>
 </template>
 
@@ -71,36 +75,58 @@ export default {
       permission: {
         add: ['admin', 'commonFields:add'],
         edit: ['admin', 'commonFields:edit']
-      }
+      },
+      verifyDialogVisible: false,
+      form: {
+        verifyCode: ''
+      },
+      formLabelWidth: '110px'
     }
   },
   methods: {
+    // 获取数据前设置好接口地址
+    // [CRUD.HOOK.beforeToCU]() {
+    //   const h = this.$createElement
+    //   return this.$prompt(h('p', null, [
+    //     h('span', null, '这里为技术人员维护系统时使用，用户级无需设置。'),
+    //     h('br', null, ''),
+    //     h('span', { style: 'color: red' }, '警告：强行修改会导致系统数据异常或丢失！如因用户强行修改，本系统不负责因此导致的相关后果！')
+    //   ]), '关键提示', {
+    //     confirmButtonText: '确定验证',
+    //     showCancelButton: false,
+    //     customClass: 'validate',
+    //     beforeClose: (action, instance, done) => {
+    //       if (action === 'confirm') {
+    //         if (instance.inputValue === '123') {
+    //           done()
+    //         } else {
+    //           this.$message.error('验证码错误！')
+    //         }
+    //       } else {
+    //         done()
+    //       }
+    //     }
+    //   }).then(({ value }) => {
+    //     // call crud.status.add = CRUD.STATUS.PREPARED
+    //   }).catch(() => {
+    //     return false
+    //   })
+    // },
     // 获取数据前设置好接口地址
     [CRUD.HOOK.beforeToCU]() {
-      const h = this.$createElement
-      return this.$prompt(h('p', null, [
-        h('span', null, '这里为九州档案技术人员维护系统时使用，用户级无需设置。'),
-        h('br', null, ''),
-        h('span', { style: 'color: red' }, '警告：强行修改会导致系统数据异常或丢失！如因用户强行修改，本系统不负责因此导致的相关后果！')
-      ]), '关键提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        beforeClose: (action, instance, done) => {
-          if (action === 'confirm') {
-            if (instance.inputValue === '123') {
-              done()
-            } else {
-              this.$message.error('验证码错误！')
-            }
-          } else {
-            done()
-          }
-        }
-      }).then(({ value }) => {
-        // call crud.status.add = CRUD.STATUS.PREPARED
-      }).catch(() => {
-        return false
-      })
+      this.verifyDialogVisible = true
+    },
+    handleConfirm() {
+      if (this.form.verifyCode === '123') {
+        this.verifyDialogVisible = false
+        this.form.verifyCode = ''
+      } else {
+        this.$message.error('验证码错误！')
+      }
+    },
+    handleClose(done) {
+      this.form.verifyCode = ''
+      done()
     },
     clickRowHandler(row) {
       this.$refs.table.clearSelection()
@@ -127,4 +153,12 @@ export default {
 ::v-deep thead .el-table-column--selection .cell {
   display: none;
 }
+.validate .el-message-box__btns {
+  text-align: center;
+}
+</style>
+<style rel="stylesheet/scss" lang="scss">
+.validate .el-message-box__btns {
+  text-align: center;
+}
 </style>