Your Name
2022-07-05 39d90ac360f55f8835920c6e12e5cd1e4246bdcc
src/views/specialWorkSystem/approvalProcess/addApproveProcess/index.vue
@@ -1,34 +1,37 @@
<template>
   <div class="home-container">
      <el-scrollbar height="100%">
      <div class="homeCard">
      <el-row>
         <el-button type="primary" size="large" @click="addApprove">新建审批环节</el-button>
      </el-row>
      <el-row>
         <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="id" label="编号" width="180" />
            <el-table-column prop="step" label="环节名称" width="180" />
            <el-table-column prop="type" label="审核类型"/>
            <el-table-column type="index" label="编号" width="100"/>
            <el-table-column prop="step" label="环节名称"/>
            <el-table-column prop="type" label="审核类型" width="180"/>
            <el-table-column prop="createTime" label="创建时间" width="180" />
            <el-table-column prop="editor" label="最新编辑人" width="180" />
            <el-table-column prop="editorTime" label="最新编辑时间" />
            <el-table-column prop="editeTime" label="最新编辑时间" width="180" />
            <el-table-column fixed="right" label="操作" width="180">
               <template #default>
                  <el-button link type="primary" size="small">编辑</el-button>
                  <el-button link type="danger" size="small">删除</el-button>
               <template #default="scope">
                  <el-button link type="primary" size="small" @click="editeRow(scope.$index,scope.row)">编辑</el-button>
                  <el-button link type="danger" size="small" @click="deleteRow(scope.$index)">删除</el-button>
               </template>
            </el-table-column>
         </el-table>
      </el-row>
      <el-dialog v-model="dialogAddForm" title="新建审批环节">
         <el-form :model="reportForm" label-width="120px">
            <el-form-item label="环节名称">
      </div>
      <el-dialog v-model="dialogAddForm" title="新建审批环节" @close="dialogColse">
         <el-form :model="reportForm" label-width="120px" ref="ruleFormRef" :rules="rules">
            <el-form-item label="环节名称" prop="step">
               <el-select v-model="reportForm.step" placeholder="选择环节名称">
                  <el-option label="作业负责人审批" value="作业负责人审批" />
                  <el-option label="作业负责人审批2" value="作业负责人审批2" />
                  <el-option label="作业负责人审批3" value="作业负责人审批3" />
               </el-select>
            </el-form-item>
            <el-form-item label="审核类型">
            <el-form-item label="审核类型" prop="type">
               <el-select v-model="reportForm.type" placeholder="选择审核类型">
                  <el-option label="上报审批意见" value="上报审批意见" />
                  <el-option label="上报气体检测数据" value="上报气体检测数据" />
@@ -39,11 +42,12 @@
               <el-input v-model="reportForm.editor" />
            </el-form-item>
            <el-form-item>
               <el-button type="primary" @click="onSubmitAddForm" size="default">确认</el-button>
               <el-button size="default">取消</el-button>
               <el-button type="primary" @click="onSubmitAddForm(ruleFormRef)" size="default">确认</el-button>
               <el-button size="default" @click="dialogAddForm = false">取消</el-button>
            </el-form-item>
         </el-form>
      </el-dialog>
      </el-scrollbar>
   </div>
</template>
@@ -53,7 +57,8 @@
   import { initBackEndControlRoutes } from '/@/router/backEnd';
   import {useUserInfo} from "/@/stores/userInfo";
   import { Session } from '/@/utils/storage';
   import { ElMessage } from 'element-plus'
   import type { FormInstance, FormRules } from 'element-plus'
   let global: any = {
      homeChartOne: null,
      homeChartTwo: null,
@@ -67,52 +72,100 @@
   interface type {
   }
   interface User {
      step: string,
      type: string,
      createTime: string
   }
   export default defineComponent({
      name: 'reportTypeSetting',
      setup() {
         const userInfo = useUserInfo()
         const { userInfos } = storeToRefs(userInfo);
         const state  = reactive<stateType>({});
         const tableData = [
         const tableData = reactive([
            {
               id: '0',
               step: '作业负责人审批',
               type: '',
               createTime: '',
               editor: '',
               editorTime: ''
               editeTime: ''
            },
            {
               id: '1',
               step: '作业负责人审批',
               type: '',
               createTime: '',
               editor: '',
               editorTime: ''
               editeTime: ''
            },
            {
               id: '2',
               step: '作业负责人审批',
               type: '',
               createTime: '',
               editor: '',
               editorTime: ''
               editeTime: ''
            }
         ];
         ]);
         const dialogAddForm = ref(false);
         const reportForm = reactive({
            id: '',
         const rowIndex = ref(-1)
         const reportForm = ref({
            step: '',
            type: '',
            createTime: '',
            editor: '',
            editorTime: ''
            editeTime: ''
         })
         const addApprove = ()=>{
            dialogAddForm.value = true
         };
         const onSubmitAddForm = () => {
            console.log('submit!')
         const ruleFormRef = ref<FormInstance>()
         const rules = reactive<FormRules>({
            step:[{required: true, message: '该内容不能为空',trigger:'blur'}],
            type:[{required: true, message: '该内容不能为空',trigger:'blur'}]
         })
         const onSubmitAddForm = async (formEl: FormInstance | undefined) => {
            if (!formEl) return
            await formEl.validate((valid, fields) => {
               if (valid) {
                  if(rowIndex.value == -1){
                     reportForm.value.createTime = new Date().toLocaleString()
                     reportForm.value.editeTime = new Date().toLocaleString()
                     tableData.push(reportForm.value)
                  }else{
                     tableData[rowIndex.value] = reportForm.value
                  }
                  // reportForm.value = {
                  //    step: '',
                  //    type: '',
                  //    createTime: '',
                  //    editor: '',
                  //    editeTime: ''
                  // }
                  dialogAddForm.value = false
               } else {
                  console.log('error submit!', fields)
               }
            })
         }
         const editeRow = (index: number, row: User) =>{
            dialogAddForm.value = true
            rowIndex.value = index
            reportForm.value = JSON.parse(JSON.stringify(row))
            reportForm.value.editeTime = new Date().toLocaleString()
         }
         const deleteRow = (index)=>{
            tableData.splice( index,1)
         }
         const dialogColse = () =>{
            reportForm.value = {
               step: '',
               type: '',
               createTime: '',
               editor: '',
               editeTime: ''
            }
            rowIndex.value = -1
         }
         // 折线图
         const renderMenu = async (value: string) => {
@@ -125,6 +178,12 @@
            tableData,
            dialogAddForm,
            reportForm,
            ruleFormRef,
            rules,
            rowIndex,
            dialogColse,
            editeRow,
            deleteRow,
            addApprove,
            onSubmitAddForm,
            ...toRefs(state),
@@ -137,7 +196,14 @@
   $homeNavLengh: 8;
   .home-container {
      overflow: hidden;
      padding: 80px;
      padding: 20px;
      height: 100%;
      .homeCard{
         width: 100%;
         padding: 20px;
         background: #fff;
         border-radius: 4px;
      }
      .el-row{
         margin-bottom: 20px;
      }