Преглед изворни кода

待办事项状态、优先级、结果等数据绑定完成

liangyan0105 пре 3 година
родитељ
комит
9c0669f125

+ 1 - 0
src/assets/less/overwrite.css

@@ -48,6 +48,7 @@ a {
 }
 .cardIcon {
   font-size: 18px;
+  font-weight: 700;
   margin-right: 10px;
   color: #1489b8;
   background-color: rgba(79, 92, 82, 0.1);

+ 2 - 3
src/assets/less/overwrite.less

@@ -1,6 +1,6 @@
 // 覆盖 ant-design 库默认样式  公共样式
 
-//所有内容
+//所有内容设置最小高度
 .main {
   min-height: 750px;
 }
@@ -11,8 +11,6 @@
   background-color: #092834;
   color: #fc600a;
   letter-spacing: 1px;
-  // width: 100%;
-  // bottom: 0;
 }
 a {
   color: rgb(133, 130, 130);
@@ -64,6 +62,7 @@ a {
 //card 的小图标
 .cardIcon {
   font-size: 18px;
+  font-weight: 700;
   margin-right: 10px;
   color: #1489b8;
   background-color: rgba(79, 92, 82, 0.1);

+ 543 - 541
src/views/activiti/form/demoForm2.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="form-main">
-    <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
+    <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
       <!-- <a-form @submit="handleSubmit" :form="form">
         <a-form-item
           label="标题"
@@ -33,11 +33,12 @@
         <a-button
           htmlType="submit"
           type="primary"
-          :disabled="disabled||btndisabled"
+          :disabled="disabled || btndisabled"
           @click="handleSubmit"
-        >保存</a-button>
+        >保存</a-button
+        >
         <todoManageOperation
-          v-if="processData.operationType&&processData.operationType=='1'"
+          v-if="processData.operationType && processData.operationType == '1'"
           :processData="processData"
           :todoManageOperationObject="todoManageOperationObject"
           :disabled="disabled"
@@ -45,7 +46,7 @@
           @refreshToDo="refreshToDo"
           @handleSubmit2="handleSubmit2"
         ></todoManageOperation>
-        <a-button style="margin-left: 8px;" :disabled="disabled||disabled2" @click="close">取消</a-button>
+        <a-button style="margin-left: 8px;" :disabled="disabled || disabled2" @click="close">取消</a-button>
       </div>
     </a-card>
   </div>
@@ -57,583 +58,584 @@ import todoManageOperation from '../operation/todoManageOperation'
 import { postAction } from '@/api/manage'
 
 export default {
-  name: 'demoForm',
-  props: {
-    /*全局禁用,可表示查看*/
-    disabled: {
-      type: Boolean,
-      default: false,
-      required: false
+    name: 'DemoForm',
+    props: {
+    /* 全局禁用,可表示查看 */
+        disabled: {
+            type: Boolean,
+            default: false,
+            required: false
+        },
+        /* 流程数据 */
+        processData: {
+            type: Object,
+            default: () => {
+                return {}
+            },
+            required: false
+        },
+        /* 是否新增 */
+        isNew: { type: Boolean, default: false, required: false }
     },
-    /*流程数据*/
-    processData: {
-      type: Object,
-      default: () => {
-        return {}
-      },
-      required: false
+    components: {
+        todoManageOperation
     },
-    /*是否新增*/
-    isNew: { type: Boolean, default: false, required: false }
-  },
-  components: {
-    todoManageOperation
-  },
-  data() {
-    return {
-      todoManageOperationObject: {
-        isSave: false,
-        formData: {}
-      },
-      disabled2: false, //用来取决于表单时不同流程节点填写不同表单信息使用
-      jsonData: {},
-      url: {
-        getForm: '/actBusiness/getForm',
-        addApply: '/actBusiness/add',
-        editForm: '/actBusiness/editForm',
-        leaveType: '/sys/dict/getDictItems'
-      },
-      description: '流程表单demo,按例开发表单。需在 activitiMixin.js 中加入写好的表单',
-      // form
-      form: this.$form.createForm(this),
-      /*表单回显数据*/
-      data: {},
-      btndisabled: false,
-      ceshi_file: null,
-      dynamicData: {
-        typeData: [], //请假类型下拉数据
-        reimbursementTypeList: [], //报销类型下拉数据
-        invoiceTypeList: [] //发票类型下拉数据
-      }
-    }
-  },
-  created() {
-    console.log('流程数据', this.processData)
-    //加载一些下拉选择数据等
-    // this.getDataList()
-    let businessTable = ''
-    //如果没有值则在另一个属性上有值
-    if (!this.processData.businessTable) {
-      this.processData.businessTable = this.processData.tableName
-    }
-    this.getAction('/tbTableInfo/query', {
-      businessTable: this.processData.businessTable,
-      taskNodeId: this.processData.key
-    }).then(res => {
-      // this.$refs.KFB.setData({aaa:null,bbb:null,name:"123"})
-      // this.$refs.KFB.getData().then(res => {
-      //   console.log('aaa',res)
-      // })
+    data () {
+        return {
+            todoManageOperationObject: {
+                isSave: false,
+                formData: {}
+            },
+            disabled2: false, // 用来取决于表单时不同流程节点填写不同表单信息使用
+            jsonData: {},
+            url: {
+                getForm: '/actBusiness/getForm',
+                addApply: '/actBusiness/add',
+                editForm: '/actBusiness/editForm',
+                leaveType: '/sys/dict/getDictItems'
+            },
+            description: '流程表单demo,按例开发表单。需在 activitiMixin.js 中加入写好的表单',
+            // form
+            form: this.$form.createForm(this),
+            /* 表单回显数据 */
+            data: {},
+            btndisabled: false,
+            ceshi_file: null,
+            dynamicData: {
+                typeData: [], // 请假类型下拉数据
+                reimbursementTypeList: [], // 报销类型下拉数据
+                invoiceTypeList: [] // 发票类型下拉数据
+            }
+        }
+    },
+    created () {
+        console.log('流程数据', this.processData)
+        // 加载一些下拉选择数据等
+        // this.getDataList()
+        let businessTable = ''
+        // 如果没有值则在另一个属性上有值
+        if (!this.processData.businessTable) {
+            this.processData.businessTable = this.processData.tableName
+        }
+        this.getAction('/tbTableInfo/query', {
+            businessTable: this.processData.businessTable,
+            taskNodeId: this.processData.key
+        }).then(res => {
+            // this.$refs.KFB.setData({aaa:null,bbb:null,name:"123"})
+            // this.$refs.KFB.getData().then(res => {
+            //   console.log('aaa',res)
+            // })
 
-      var jsonString = JSON.stringify(res.result.jsonContent)
-      // var jsonString='123d"dynamicKey":"666"'
-      var index = 1
+            var jsonString = JSON.stringify(res.result.jsonContent)
+            // var jsonString='123d"dynamicKey":"666"'
+            var index = 1
 
-      var dynamicKeyValueList = []
-      for (var index = 1; index !== -1; ) {
-        //动态字符位置
-        index = jsonString.indexOf('"dynamicKey"', index)
-        if (index !== -1) {
-          //从指定字符的周后一个字符后开始找(")
-          var ihStart = jsonString.indexOf('"', index + 12)
-          //再从 (") 后面位置还是找下一个 (")
-          var ihEnd = jsonString.indexOf('"', ihStart + 1)
-          //获取引号之间的字符
-          var dynamicKeyValue = jsonString.substring(ihStart + 1, ihEnd)
-          //如果动态表示不为空则获取
-          if (dynamicKeyValue != '') {
-            dynamicKeyValueList.push(dynamicKeyValue)
-          }
-          index = ihEnd + 1
-        }
-      }
-      //循环动态数据源表示获取数据
-      // if(dynamicKeyValueList.length>0){
-      //   dynamicKeyValueList.forEach(async element => {
-      //      await this.getDataListByName(element);
-      //   });
-      // }
-      console.log(dynamicKeyValueList)
-      if (dynamicKeyValueList.length > 0) {
-        //获取数据字典数据源
-        postAction('/sys/dict/getDictItems/getDictList', dynamicKeyValueList).then(dictData => {
-          if (dictData.success) {
-            this.dynamicData = dictData.result.dicList
+            var dynamicKeyValueList = []
+            for (var index = 1; index !== -1;) {
+                // 动态字符位置
+                index = jsonString.indexOf('"dynamicKey"', index)
+                if (index !== -1) {
+                    // 从指定字符的周后一个字符后开始找(")
+                    var ihStart = jsonString.indexOf('"', index + 12)
+                    // 再从 (") 后面位置还是找下一个 (")
+                    var ihEnd = jsonString.indexOf('"', ihStart + 1)
+                    // 获取引号之间的字符
+                    var dynamicKeyValue = jsonString.substring(ihStart + 1, ihEnd)
+                    // 如果动态表示不为空则获取
+                    if (dynamicKeyValue != '') {
+                        dynamicKeyValueList.push(dynamicKeyValue)
+                    }
+                    index = ihEnd + 1
+                }
+            }
+            // 循环动态数据源表示获取数据
+            // if(dynamicKeyValueList.length>0){
+            //   dynamicKeyValueList.forEach(async element => {
+            //      await this.getDataListByName(element);
+            //   });
+            // }
+            console.log(dynamicKeyValueList)
+            if (dynamicKeyValueList.length > 0) {
+                // 获取数据字典数据源
+                postAction('/sys/dict/getDictItems/getDictList', dynamicKeyValueList).then(dictData => {
+                    if (dictData.success) {
+                        this.dynamicData = dictData.result.dicList
 
-            //获取用户下拉数据
-            this.getAction('/sys/user/list2',{pageSize:20000}).then(userData => {
-              if (res.success) {
-                userData.result.records.forEach(user => {
-                  user.label = user.realname
-                  user.value = user.username
+                        // 获取用户下拉数据
+                        this.getAction('/sys/user/list2', { pageSize: 20000 }).then(userData => {
+                            if (res.success) {
+                                userData.result.records.forEach(user => {
+                                    user.label = user.realname
+                                    user.value = user.username
+                                })
+                                // 存到动态数据源中
+                                this.dynamicData.userList = userData.result.records
+                                // 获取json
+                                this.jsonData = res.result.jsonContent
+                                if (!this.isNew) {
+                                    this.init()
+                                }
+                            } else {
+                                this.$message.error(userData.message)
+                            }
+                        })
+                    } else {
+                        this.$message.error(dictData.message)
+                    }
                 })
-                //存到动态数据源中
-                this.dynamicData.userList = userData.result.records
-                //获取json
+            } else {
+                // 获取json
                 this.jsonData = res.result.jsonContent
                 if (!this.isNew) {
-                  this.init()
+                    this.init()
                 }
-              } else {
-                this.$message.error(userData.message)
-              }
-            })
-          } else {
-            this.$message.error(dictData.message)
-          }
-        })
-      } else {
-        //获取json
-        this.jsonData = res.result.jsonContent
-        if (!this.isNew) {
-          this.init()
-        }
-      }
-
-      //后台检测到流程节点有关联表单且前台处于我的待办界面打开表单详情
-      if (res.result.isSave && this.processData.isSuspended != undefined) {
-        this.disabled = false
-        this.btndisabled = false
-      }
-    })
-  },
-  methods: {
-    //根据字典名字获取数据源
-    getDataListByName(name) {
-      this.getAction(this.url.leaveType + '/' + name).then(res => {
-        if (res.success) {
-          this.dynamicData[name] = res.result
-          console.log(111)
-        } else {
-          this.$message.error(res.message)
-        }
-      })
-    },
-    //获取获取下拉数据等
-    getDataList() {
-      //获取请假类型下拉数据
-      this.getAction(this.url.leaveType + '/leave_type').then(res => {
-        if (res.success) {
-          this.dynamicData.typeData = res.result
-        } else {
-          this.$message.error(res.message)
-        }
-      })
-      //获取报销类型下拉数据
-      this.getAction(this.url.leaveType + '/reimbursement_type').then(res => {
-        if (res.success) {
-          this.dynamicData.reimbursementTypeList = res.result
-        } else {
-          this.$message.error(res.message)
-        }
-      })
-      //获取发票类型下拉数据
-      this.getAction(this.url.leaveType + '/invoice_type').then(res => {
-        if (res.success) {
-          this.dynamicData.invoiceTypeList = res.result
-        } else {
-          this.$message.error(res.message)
-        }
-      })
-    },
-    /*回显数据*/
-    init() {
-      this.btndisabled = true
-      var r = this.processData
-      this.getAction(this.url.getForm, {
-        tableId: r.tableId,
-        tableName: r.tableName
-      }).then(res => {
-        if (res.success) {
-          let formData = res.result
-          formData.tableName = r.tableName
-          this.data = formData
-          console.log('表单回显数据', this.data)
-          console.log(this.data)
-          this.$refs.KFB.setData(this.data)
-          // this.$nextTick(() => {
-          //   this.$refs.KFB.form.setFieldsValue(pick(this.data, 'name'))
+            }
 
-          // })
-          this.btndisabled = false
-        } else {
-          this.$message.error(res.message)
-        }
-      })
+            // 后台检测到流程节点有关联表单且前台处于我的待办界面打开表单详情
+            if (res.result.isSave && this.processData.isSuspended != undefined) {
+                this.disabled = false
+                this.btndisabled = false
+            }
+        })
     },
-    //表单字段数值发生改变事件
-    handleChange(value, key) {
-      // 数据变化时触发
-      //如果开始时间发生变化
-      if (key == 'start_time') {
-        //判断结束时间是否存在
-        if (this.$refs.KFB.form.getFieldValue('end_time')) {
-          //获取时间差
-          let duration = startEndFun(value, this.$refs.KFB.form.getFieldValue('end_time'))
-          if (duration) {
-            // 使用k-form-design组件的form属性修改表单数据
-            this.$refs.KFB.setData({
-              duration: duration
-            })
-          }
-        }
-      }
-      //如果结束时间发生变化
-      if (key == 'end_time') {
-        //判断结束时间是否存在
-        if (this.$refs.KFB.form.getFieldValue('start_time')) {
-          //获取时间差
-          let duration = startEndFun(this.$refs.KFB.form.getFieldValue('start_time'), value)
-          if (duration) {
-            // 使用k-form-design组件的form属性修改表单数据
-            this.$refs.KFB.setData({
-              duration: duration
+    methods: {
+    // 根据字典名字获取数据源
+        getDataListByName (name) {
+            this.getAction(this.url.leaveType + '/' + name).then(res => {
+                if (res.success) {
+                    this.dynamicData[name] = res.result
+                    console.log(111)
+                } else {
+                    this.$message.error(res.message)
+                }
             })
-          }
-        }
-      }
-    },
-    // handler
-    handleSubmit(e) {
-      // return new Promise((resolve)=>{
-      //通过函数获取数据
-      this.$refs.KFB.getData()
-        .then(res => {
-          //清除为空的表单数据
-          _.keys(res).forEach(r => {
-            if (!res[r]) {
-              delete res[r]
-            }
-          })
-          // 获取数据成功
-          let formData = JSON.parse(JSON.stringify(res))
-          console.log(formData)
-          formData.id = this.data.id
-          formData.procDefId = this.processData.id
-          formData.procDeTitle = this.processData.name
-          if (!formData.tableName) formData.tableName = this.processData.businessTable
-          formData.filedNames = _.keys(res).join(',')
-          formData.filedNames = getFiledNames(formData) //获取主表字段,排除子表标识
-          var url = this.url.addApply
-          if (!this.isNew) {
-            url = this.url.editForm
-          }
-          //是否存在子表
-          let ischild = false
-          //循环表单字段属性判断是否属性中包含数组对象
-          let i = 0 //子表数量
-          _.keys(res)
-            .join(',')
-            .split(',')
-            .forEach(element => {
-              if (formData[element] instanceof Array) {
-                //判断是否符合子表命名规则
-                if (element.indexOf('&') != -1) {
-                  let tableChildNameList = element.split('&')
-                  //判断是否能拆分两个字符,子表标识和子表数据库名称
-                  if (tableChildNameList.length == 2) {
-                    i++
-                    let childName = tableChildNameList[1] //子表数据库名称
-                    if (!formData.table_name_children) {
-                      //第一次拼接
-                      formData.table_name_children = childName //表名
-                    } else {
-                      //后面的表明拼接用“,”隔开
-                      formData.table_name_children = formData.table_name_children + ',' + childName //表名
-                    }
-                    //定义属性名和值
-                    formData['childFiledNames' + i] = _.keys(formData[element][0]).join(',') //子表字段名
-                    formData['childList' + i] = JSON.stringify(formData[element]) //子表数据
-                    ischild = true
-                  }
+        },
+        // 获取获取下拉数据等
+        getDataList () {
+            // 获取请假类型下拉数据
+            this.getAction(this.url.leaveType + '/leave_type').then(res => {
+                if (res.success) {
+                    this.dynamicData.typeData = res.result
                 } else {
-                  //如果不是子表则是上传文件,则转字符串
-                  formData[element] = JSON.stringify(formData[element])
+                    this.$message.error(res.message)
                 }
-              }
-              // formData[element];
             })
-          //判断需不需要存子表
-          if (ischild) {
-            formData.filedNames = formData.filedNames + ',table_name_children'
-          }
-          
-          console.log(formData)
-          //子表数据
-          //调用保存接口
-          this.btndisabled = true
-          this.todoManageOperationObject.formData = formData
-          this.todoManageOperationObject.url = url
-          //获取是否部门负责人
-          formData.filedNames=formData.filedNames+',is_leaders'
-          formData.is_leaders=this.$store.getters.userInfo.identity
-          
-          //非我的待办节点打卡表单界面
-          this.postFormAction(url, formData)
-            .then(res => {
-              if (res.success) {
-                this.todoManageOperationObject.isSave = true
-                this.$message.success('保存成功!')
-                console.log('123')
-                this.$emit('afterSubmit', formData)
-                this.$emit('close')
-                // resolve(true);
-              } else {
-                this.$message.error(res.message)
-                // resolve(false);
-              }
+            // 获取报销类型下拉数据
+            this.getAction(this.url.leaveType + '/reimbursement_type').then(res => {
+                if (res.success) {
+                    this.dynamicData.reimbursementTypeList = res.result
+                } else {
+                    this.$message.error(res.message)
+                }
             })
-            .finally(() => {
-              this.btndisabled = false
-              // resolve(false);
+            // 获取发票类型下拉数据
+            this.getAction(this.url.leaveType + '/invoice_type').then(res => {
+                if (res.success) {
+                    this.dynamicData.invoiceTypeList = res.result
+                } else {
+                    this.$message.error(res.message)
+                }
             })
-        })
-        .catch(err => {
-          console.log(err, '校验失败')
-          // resolve(false);
-        })
-      // })
-    },
-    //我的待办点击通过保存专用
-    handleSubmit2(e) {
-      // return new Promise((resolve)=>{
-      //通过函数获取数据
-      this.$refs.KFB.getData()
-        .then(res => {
-          // 获取数据成功
-          let formData = JSON.parse(JSON.stringify(res))
-          console.log(formData)
-          formData.id = this.data.id
-          formData.procDefId = this.processData.id
-          formData.procDeTitle = this.processData.name
-          if (!formData.tableName) formData.tableName = this.processData.businessTable
-          formData.filedNames = _.keys(res).join(',')
-          formData.filedNames = getFiledNames(formData) //获取主表字段,排除子表标识
-          var url = this.url.addApply
-          if (!this.isNew) {
-            url = this.url.editForm
-          }
-          //是否存在子表
-          let ischild = false
-          //循环表单字段属性判断是否属性中包含数组对象
-          let i = 0 //子表数量
-          _.keys(res)
-            .join(',')
-            .split(',')
-            .forEach(element => {
-              if (formData[element] instanceof Array) {
-                //判断是否符合子表命名规则
-                if (element.indexOf('&') != -1) {
-                  let tableChildNameList = element.split('&')
-                  //判断是否能拆分两个字符,子表标识和子表数据库名称
-                  if (tableChildNameList.length == 2) {
-                    i++
-                    let childName = tableChildNameList[1] //子表数据库名称
-                    if (!formData.table_name_children) {
-                      //第一次拼接
-                      formData.table_name_children = childName //表名
-                    } else {
-                      //后面的表明拼接用“,”隔开
-                      formData.table_name_children = formData.table_name_children + ',' + childName //表名
-                    }
-                    //定义属性名和值
-                    formData['childFiledNames' + i] = _.keys(formData[element][0]).join(',') //子表字段名
-                    formData['childList' + i] = JSON.stringify(formData[element]) //子表数据
-                    ischild = true
-                  }
+        },
+        /* 回显数据 */
+        init () {
+            this.btndisabled = true
+            var r = this.processData
+            this.getAction(this.url.getForm, {
+                tableId: r.tableId,
+                tableName: r.tableName
+            }).then(res => {
+                if (res.success) {
+                    let formData = res.result
+                    formData.tableName = r.tableName
+                    this.data = formData
+                    console.log('表单回显数据', this.data)
+                    console.log(this.data)
+                    this.$refs.KFB.setData(this.data)
+                    // this.$nextTick(() => {
+                    //   this.$refs.KFB.form.setFieldsValue(pick(this.data, 'name'))
+
+                    // })
+                    this.btndisabled = false
                 } else {
-                  //如果不是子表则是上传文件,则转字符串
-                  formData[element] = JSON.stringify(formData[element])
+                    this.$message.error(res.message)
                 }
-              }
-              // formData[element];
             })
-          //判断需不需要存子表
-          if (ischild) {
-            formData.filedNames = formData.filedNames + ',table_name_children'
-          }
+        },
+        // 表单字段数值发生改变事件
+        handleChange (value, key) {
+            // 数据变化时触发
+            // 如果开始时间发生变化
+            if (key == 'start_time') {
+                // 判断结束时间是否存在
+                if (this.$refs.KFB.form.getFieldValue('end_time')) {
+                    // 获取时间差
+                    let duration = startEndFun(value, this.$refs.KFB.form.getFieldValue('end_time'))
+                    if (duration) {
+                        // 使用k-form-design组件的form属性修改表单数据
+                        this.$refs.KFB.setData({
+                            duration: duration
+                        })
+                    }
+                }
+            }
+            // 如果结束时间发生变化
+            if (key == 'end_time') {
+                // 判断结束时间是否存在
+                if (this.$refs.KFB.form.getFieldValue('start_time')) {
+                    // 获取时间差
+                    let duration = startEndFun(this.$refs.KFB.form.getFieldValue('start_time'), value)
+                    if (duration) {
+                        // 使用k-form-design组件的form属性修改表单数据
+                        this.$refs.KFB.setData({
+                            duration: duration
+                        })
+                    }
+                }
+            }
+        },
+        // handler
+        handleSubmit (e) {
+            // return new Promise((resolve)=>{
+            // 通过函数获取数据
+            this.$refs.KFB.getData()
+                .then(res => {
+                    // 清除为空的表单数据
+                    _.keys(res).forEach(r => {
+                        if (!res[r]) {
+                            delete res[r]
+                        }
+                    })
+                    // 获取数据成功
+                    let formData = JSON.parse(JSON.stringify(res))
+                    console.log(formData)
+                    formData.id = this.data.id
+                    formData.procDefId = this.processData.id
+                    formData.procDeTitle = this.processData.name
+                    if (!formData.tableName) formData.tableName = this.processData.businessTable
+                    formData.filedNames = _.keys(res).join(',')
+                    formData.filedNames = getFiledNames(formData) // 获取主表字段,排除子表标识
+                    var url = this.url.addApply
+                    if (!this.isNew) {
+                        url = this.url.editForm
+                    }
+                    // 是否存在子表
+                    let ischild = false
+                    // 循环表单字段属性判断是否属性中包含数组对象
+                    let i = 0 // 子表数量
+                    _.keys(res)
+                        .join(',')
+                        .split(',')
+                        .forEach(element => {
+                            if (formData[element] instanceof Array) {
+                                // 判断是否符合子表命名规则
+                                if (element.indexOf('&') != -1) {
+                                    let tableChildNameList = element.split('&')
+                                    // 判断是否能拆分两个字符,子表标识和子表数据库名称
+                                    if (tableChildNameList.length == 2) {
+                                        i++
+                                        let childName = tableChildNameList[1] // 子表数据库名称
+                                        if (!formData.table_name_children) {
+                                            // 第一次拼接
+                                            formData.table_name_children = childName // 表名
+                                        } else {
+                                            // 后面的表明拼接用“,”隔开
+                                            formData.table_name_children = formData.table_name_children + ',' + childName // 表名
+                                        }
+                                        // 定义属性名和值
+                                        formData['childFiledNames' + i] = _.keys(formData[element][0]).join(',') // 子表字段名
+                                        formData['childList' + i] = JSON.stringify(formData[element]) // 子表数据
+                                        ischild = true
+                                    }
+                                } else {
+                                    // 如果不是子表则是上传文件,则转字符串
+                                    formData[element] = JSON.stringify(formData[element])
+                                }
+                            }
+                            // formData[element];
+                        })
+                    // 判断需不需要存子表
+                    if (ischild) {
+                        formData.filedNames = formData.filedNames + ',table_name_children'
+                    }
 
-          console.log(formData)
-          //子表数据
-          //调用保存接口
-          this.btndisabled = true
-          this.todoManageOperationObject.formData = formData
-          this.todoManageOperationObject.url = url
-        })
-        .catch(err => {
-          console.log(err, '校验失败')
-          // resolve(false);
-        })
-      // })
-    },
-    close() {
-      this.$emit('close')
-    },
-    getData() {
-      // 通过函数获取数据
-      this.$refs.KFB.getData()
-        .then(res => {
-          // 获取数据成功
-          alert(JSON.stringify(res))
-        })
-        .catch(err => {
-          console.log(err, '校验失败')
-        })
-    },
-    //刷新待办列表
-    refreshToDo() {
-      this.close()
-      this.$emit('getDataList')
+                    console.log(formData)
+                    // 子表数据
+                    // 调用保存接口
+                    this.btndisabled = true
+                    this.todoManageOperationObject.formData = formData
+                    this.todoManageOperationObject.url = url
+                    // 获取是否部门负责人
+                    formData.filedNames = formData.filedNames + ',is_leaders'
+                    formData.is_leaders = this.$store.getters.userInfo.identity
+
+                    // 非我的待办节点打卡表单界面
+                    this.postFormAction(url, formData)
+                        .then(res => {
+                            if (res.success) {
+                                this.todoManageOperationObject.isSave = true
+                                this.$message.success('保存成功!')
+                                console.log('报销流程 保存成功')
+                                this.$emit('afterSubmit', formData)
+                                this.$emit('close')
+                                // resolve(true);
+                            } else {
+                                this.$message.error(res.message)
+                                // resolve(false);
+                            }
+                        })
+                        .finally(() => {
+                            this.btndisabled = false
+                            // resolve(false);
+                        })
+                })
+                .catch(err => {
+                    console.log(err, '校验失败')
+                    // resolve(false);
+                })
+            // })
+        },
+        // 我的待办点击通过保存专用
+        handleSubmit2 (e) {
+            // return new Promise((resolve)=>{
+            // 通过函数获取数据
+            this.$refs.KFB.getData()
+                .then(res => {
+                    // 获取数据成功
+                    let formData = JSON.parse(JSON.stringify(res))
+                    console.log(formData)
+                    formData.id = this.data.id
+                    formData.procDefId = this.processData.id
+                    formData.procDeTitle = this.processData.name
+                    if (!formData.tableName) formData.tableName = this.processData.businessTable
+                    formData.filedNames = _.keys(res).join(',')
+                    formData.filedNames = getFiledNames(formData) // 获取主表字段,排除子表标识
+                    var url = this.url.addApply
+                    if (!this.isNew) {
+                        url = this.url.editForm
+                    }
+                    // 是否存在子表
+                    let ischild = false
+                    // 循环表单字段属性判断是否属性中包含数组对象
+                    let i = 0 // 子表数量
+                    _.keys(res)
+                        .join(',')
+                        .split(',')
+                        .forEach(element => {
+                            if (formData[element] instanceof Array) {
+                                // 判断是否符合子表命名规则
+                                if (element.indexOf('&') != -1) {
+                                    let tableChildNameList = element.split('&')
+                                    // 判断是否能拆分两个字符,子表标识和子表数据库名称
+                                    if (tableChildNameList.length == 2) {
+                                        i++
+                                        let childName = tableChildNameList[1] // 子表数据库名称
+                                        if (!formData.table_name_children) {
+                                            // 第一次拼接
+                                            formData.table_name_children = childName // 表名
+                                        } else {
+                                            // 后面的表明拼接用“,”隔开
+                                            formData.table_name_children = formData.table_name_children + ',' + childName // 表名
+                                        }
+                                        // 定义属性名和值
+                                        formData['childFiledNames' + i] = _.keys(formData[element][0]).join(',') // 子表字段名
+                                        formData['childList' + i] = JSON.stringify(formData[element]) // 子表数据
+                                        ischild = true
+                                    }
+                                } else {
+                                    // 如果不是子表则是上传文件,则转字符串
+                                    formData[element] = JSON.stringify(formData[element])
+                                }
+                            }
+                            // formData[element];
+                        })
+                    // 判断需不需要存子表
+                    if (ischild) {
+                        formData.filedNames = formData.filedNames + ',table_name_children'
+                    }
+
+                    console.log(formData)
+                    // 子表数据
+                    // 调用保存接口
+                    this.btndisabled = true
+                    this.todoManageOperationObject.formData = formData
+                    this.todoManageOperationObject.url = url
+                })
+                .catch(err => {
+                    console.log(err, '校验失败')
+                    // resolve(false);
+                })
+            // })
+        },
+        close () {
+            this.$emit('close')
+        },
+        getData () {
+            // 通过函数获取数据
+            this.$refs.KFB.getData()
+                .then(res => {
+                    // 获取数据成功
+                    alert(JSON.stringify(res))
+                })
+                .catch(err => {
+                    console.log(err, '校验失败')
+                })
+        },
+        // 刷新待办列表
+        refreshToDo () {
+            this.close()
+            this.$emit('getDataList')
+        }
     }
-  }
 }
-//获取主表字段,排除子表标识
-function getFiledNames(formData) {
-  let filedNames = ''
-  let list = formData.filedNames.split(',') //获取表单属性名集合
-  list.forEach(element => {
-    if (element.indexOf('&') == -1) {
-      //查询是否有这个字段
-      if (filedNames == '') {
-        //第一次则直接等于
-        filedNames = element
-      } else {
-        //后面用逗号隔开
-        filedNames = filedNames + ',' + element
-      }
-    }
-  })
-  return filedNames
+// 获取主表字段,排除子表标识
+function getFiledNames (formData) {
+    let filedNames = ''
+    let list = formData.filedNames.split(',') // 获取表单属性名集合
+    list.forEach(element => {
+        if (element.indexOf('&') == -1) {
+            // 查询是否有这个字段
+            if (filedNames == '') {
+                // 第一次则直接等于
+                filedNames = element
+            } else {
+                // 后面用逗号隔开
+                filedNames = filedNames + ',' + element
+            }
+        }
+    })
+    return filedNames
 }
 
-//根据开始时间 结束时间计算天数
-function startEndFun(start, end) {
-  let startTime=new Date(start)
-  let endTime=new Date(end)
-  if (startTime >= endTime) return 0;
-        //1,分钟取整
-        startTime = carryTime(startTime);
-        endTime = carryTime(endTime);
-        //2,计算总天数
-        var totalTime = 0;//工时,天数
+// 根据开始时间 结束时间计算天数
+function startEndFun (start, end) {
+    let startTime = new Date(start)
+    let endTime = new Date(end)
+    if (startTime >= endTime) return 0
+    // 1,分钟取整
+    startTime = carryTime(startTime)
+    endTime = carryTime(endTime)
+    // 2,计算总天数
+    var totalTime = 0 // 工时,天数
+    if (startTime.getDay() == 6 || startTime.getDay() == 0) {
+        totalTime = endTime.getDate() - startTime.getDate()
+    } else {
+        totalTime = Math.floor((endTime - startTime) / (3600 * 1000) / 24)
+    }
+    // 3,拿初始值赋值给一个临时变量
+    var tempStartTime = new Date()
+    tempStartTime.setTime(startTime.getTime())
+    // 4,计算出总天数
+    while (tempStartTime.getDate() < endTime.getDate()) {
+        if (tempStartTime.getDay() == 6 || tempStartTime.getDay() == 0) {
+            // 周六或者周日减去
+            totalTime--
+        }
+        tempStartTime.setDate(tempStartTime.getDate() + 1)
+    }
+
+    // 5,计算出总小时数
+    var temp = 0 // 工时,小时
+    do {
         if (startTime.getDay() == 6 || startTime.getDay() == 0) {
-            totalTime = endTime.getDate() - startTime.getDate();
-        } else {
-            totalTime = Math.floor(((endTime - startTime) / (3600 * 1000)) / 24);
+            // 周六周日
+            startTime.setDate(startTime.getDate() + 1)
+            //* ********周六周日直接跳过,初始化为早晨9点
+            startTime.setHours(9)
+            startTime.setMinutes(0)
+            continue
         }
-        //3,拿初始值赋值给一个临时变量
-        var tempStartTime = new Date();
-        tempStartTime.setTime(startTime.getTime());
-        //4,计算出总天数
-        while (tempStartTime.getDate() < endTime.getDate()) {
-            if (tempStartTime.getDay() == 6 || tempStartTime.getDay() == 0) {//周六或者周日减去
-                totalTime--;
-            }
-            tempStartTime.setDate(tempStartTime.getDate() + 1);
+
+        if (endTime.getDay() == 6 || endTime.getDay() == 0) {
+            // 周六周日
+            endTime.setDate(endTime.getDate() + 1)
+            //* ********周六周日直接跳过,初始化为早晨9点
+            endTime.setHours(9)
+            endTime.setMinutes(0)
+            continue
         }
- 
-        //5,计算出总小时数
-        var temp = 0;//工时,小时
-        do {
-            if (startTime.getDay() == 6 || startTime.getDay() == 0) {//周六周日
-                startTime.setDate(startTime.getDate() + 1);
-                //*********周六周日直接跳过,初始化为早晨9点
-                startTime.setHours(9);
-                startTime.setMinutes(0);
-                continue;
-            }
 
-            if (endTime.getDay() == 6 || endTime.getDay() == 0) {//周六周日
-                endTime.setDate(endTime.getDate() + 1);
-                //*********周六周日直接跳过,初始化为早晨9点
-                endTime.setHours(9);
-                endTime.setMinutes(0);
-                continue;
-            }
- 
-            let tempMinutes = startTime.getHours() * 60 + startTime.getMinutes();
-            //上午9点到12点半,算工时
-            if (tempMinutes >= 9 * 60 && tempMinutes < (12 * 60 )) {
-                temp += 0.05;
-            }
-            //上午14点到18点半,算工时
-            if (tempMinutes >= 13 * 60 && tempMinutes < (18 * 60 )) {
-                temp += 0.05;
-            }
-            startTime.setTime(startTime.getTime() + 0.5 * 3600 * 1000);//每次增加半个小时
-        } while (startTime.getHours() * 60 + startTime.getMinutes() != endTime.getHours() * 60 + endTime.getMinutes())
-        {
- 
-            totalTime += Math.floor(temp / 0.8);
-            totalTime += temp % 0.8;
-            totalTime = Math.round(totalTime * 100) / 100
+        let tempMinutes = startTime.getHours() * 60 + startTime.getMinutes()
+        // 上午9点到12点半,算工时
+        if (tempMinutes >= 9 * 60 && tempMinutes < 12 * 60) {
+            temp += 0.05
         }
-        var days = Math.floor(totalTime);
-        var hours = Math.round((totalTime - days) * 100) / 10;
-        console.log(days + '天', hours + '小时');
- 
-        return days * 8 + hours;
+        // 上午14点到18点半,算工时
+        if (tempMinutes >= 13 * 60 && tempMinutes < 18 * 60) {
+            temp += 0.05
+        }
+        startTime.setTime(startTime.getTime() + 0.5 * 3600 * 1000) // 每次增加半个小时
+    } while (startTime.getHours() * 60 + startTime.getMinutes() != endTime.getHours() * 60 + endTime.getMinutes())
+    {
+        totalTime += Math.floor(temp / 0.8)
+        totalTime += temp % 0.8
+        totalTime = Math.round(totalTime * 100) / 100
+    }
+    var days = Math.floor(totalTime)
+    var hours = Math.round((totalTime - days) * 100) / 10
+    console.log(days + '天', hours + '小时')
+
+    return days * 8 + hours
 
-  // if (start && end) {
-  //   let startTime = new Date(start) // 开始时间
-  //   let endTime = new Date(end) // 结束时间
-  //   let usedTime = endTime - startTime // 相差的毫秒数
-  //   let days = (usedTime / 1000 / 60 / 60).toFixed(2) // 计算出天数
-  //   return days
-  // } else {
-  //   return null
-  // }
+    // if (start && end) {
+    //   let startTime = new Date(start) // 开始时间
+    //   let endTime = new Date(end) // 结束时间
+    //   let usedTime = endTime - startTime // 相差的毫秒数
+    //   let days = (usedTime / 1000 / 60 / 60).toFixed(2) // 计算出天数
+    //   return days
+    // } else {
+    //   return null
+    // }
 }
 
-//格式化时间
-function formatDate(date, fmt) {
-  if (/(y+)/.test(fmt)) {
-    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
-  }
-  let o = {
-    'M+': date.getMonth() + 1,
-    'd+': date.getDate(),
-    'h+': date.getHours(),
-    'm+': date.getMinutes(),
-    's+': date.getSeconds()
-  }
-  for (let k in o) {
-    if (new RegExp(`(${k})`).test(fmt)) {
-      let str = o[k] + ''
-      fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : padLeftZero(str))
+// 格式化时间
+function formatDate (date, fmt) {
+    if (/(y+)/.test(fmt)) {
+        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
     }
-  }
-  return fmt
+    let o = {
+        'M+': date.getMonth() + 1,
+        'd+': date.getDate(),
+        'h+': date.getHours(),
+        'm+': date.getMinutes(),
+        's+': date.getSeconds()
+    }
+    for (let k in o) {
+        if (new RegExp(`(${k})`).test(fmt)) {
+            let str = o[k] + ''
+            fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : padLeftZero(str))
+        }
+    }
+    return fmt
 }
 
-
-function padLeftZero(str) {
-  return ('00' + str).substr(str.length)
+function padLeftZero (str) {
+    return ('00' + str).substr(str.length)
 }
 
 /*
-    * 0-15分不算工时
-    * 15-45算半个小时
-    * 45-60算一个小时
-    * */
-    function carryTime(date) {
-        if (date.getMinutes() > 0 && date.getMinutes() < 15) {
-            date.setMinutes(0);
-        }
-        if (date.getMinutes() >= 15 && date.getMinutes() < 30) {
-            date.setMinutes(30);
-        }
-        if (date.getMinutes() > 30 && date.getMinutes() < 45) {
-            date.setMinutes(30);
-        }
-        if (date.getMinutes() >= 45) {
-            date.setHours(date.getHours() + 1);
-            date.setMinutes(0);
-        }
-        return date;
+ * 0-15分不算工时
+ * 15-45算半个小时
+ * 45-60算一个小时
+ * */
+function carryTime (date) {
+    if (date.getMinutes() > 0 && date.getMinutes() < 15) {
+        date.setMinutes(0)
+    }
+    if (date.getMinutes() >= 15 && date.getMinutes() < 30) {
+        date.setMinutes(30)
     }
+    if (date.getMinutes() > 30 && date.getMinutes() < 45) {
+        date.setMinutes(30)
+    }
+    if (date.getMinutes() >= 45) {
+        date.setHours(date.getHours() + 1)
+        date.setMinutes(0)
+    }
+    return date
+}
 </script>
 <style lang="less" scoped>
 .form-main {
 }
-</style>
+</style>

+ 150 - 71
src/views/user/Login.vue

@@ -12,15 +12,35 @@
         >
       </a-layout-header>
 
-      <!-- OA工作台 F7E0D4-->
+      <!-- OA工作台 -->
       <a-card title="OA工作台" :bordered="false" style="width: 100%; background:#F7E0D4;">
         <div class="oa">
-          <a href="" class="oaItem" v-for="item in activeKeyAll" :key="item.id">
+          <a
+            href="#"
+            class="oaItem"
+            v-for="(item, index) in activeKeyAll"
+            :key="index.id"
+            @click.prevent="aClick(item)"
+          >
             <img :src="item.iconAddress" width="64" class="activeIcon" />
             <p>{{ item.name }}</p>
           </a>
         </div>
       </a-card>
+
+      <!-- 数据渲染 表单 -->
+      <a-modal v-model="lcModal.visible" :title="lcModal.Title" :footer="null" :maskClosable="false">
+        <component
+          :disabled="lcModal.disabled"
+          v-if="lcModal.visible"
+          :is="lcModal.formComponent"
+          :processData="lcModal.processData"
+          :isNew="lcModal.isNew"
+          @afterSubmit="afterSub"
+          @close=";(lcModal.visible = false), (lcModal.disabled = false)"
+        >
+        </component>
+      </a-modal>
     </div>
 
     <!-- 底部 -->
@@ -41,81 +61,140 @@ import { activitiMixin } from '@/views/activiti/mixins/activitiMixin'
 import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'
 
 export default {
-    name: 'Login',
-    components: {},
-    data () {
-        return {
-            data: [],
-            url: {
-                todoList: '/actTask/todoList'
-            },
-            activeKeyAll: []
-        }
-    },
-    // 页面打开时,默认已登录
-    created () {
-        Vue.ls.remove(ACCESS_TOKEN)
-        // 进入页面自动登录
-        this.autoLogin()
-            .then(res => {
-                this.getDataList() // 待办数量
-            })
-            .then(res => {
-                this.getActiveKeyAll() // OA 4个按钮
-            })
-    },
-    methods: {
+  name: 'Login',
+  components: {},
+  data() {
+    return {
+      data: [],
+      activeKeyAll: [],
+      url: {
+        todoList: '/actTask/todoList'
+      },
+      //按钮弹框
+      lcModal: {
+        title: '',
+        visible: false,
+        disabled: false,
+        formComponent: null,
+        isNew: false
+      }
+    }
+  },
+  // 页面打开时,默认已登录
+  created() {
+    Vue.ls.remove(ACCESS_TOKEN)
+    // 进入页面自动登录
+    this.autoLogin()
+      .then(res => {
+        this.getDataList() // 待办数量
+      })
+      .then(res => {
+        this.getActiveKeyAll() // OA 4个按钮
+      })
+  },
+  methods: {
     // 映射store/user.js 中 actions的方法
-        ...mapActions(['Login']),
+    ...mapActions(['Login']),
 
-        // 自动登录
-        async autoLogin () {
-            var that = this
-            let loginParams = {}
-            loginParams.username = 'fenghf'
-            loginParams.password = 'fenghf`123456'
-            loginParams.slidered = true // 默认滑块
-            console.log('打印出登录参数', loginParams)
-            // 异步操作
-            await that
-                .Login(loginParams)
-                .then(res => {
-                    console.log('Login页面拿到token、真正登录上啦!!!!')
-                })
-                .catch(err => {
-                    console.log(err)
-                })
-        },
+    // 自动登录
+    async autoLogin() {
+      var that = this
+      let loginParams = {}
+      loginParams.username = 'fenghf'
+      loginParams.password = 'fenghf`123456'
+      loginParams.slidered = true // 默认滑块
+      console.log('打印出登录参数', loginParams)
+      // 异步操作
+      await that
+        .Login(loginParams)
+        .then(res => {
+          console.log('Login页面拿到token、真正登录上啦!!!!')
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    },
 
-        // 点击全部 跳转页面
-        todo () {
-            this.$router.push({ path: '/user/todo' })
-            console.log(this.$router)
-        },
+    // 点击全部 跳转页面
+    todo() {
+      this.$router.push({ path: '/user/todo' })
+      console.log(this.$router)
+    },
 
-        // 拿到 消息数量
-        getDataList () {
-            this.postFormAction(this.url.todoList, {}).then(res => {
-                if (res.success) {
-                    this.data = res.result || []
-                    console.log('消息数量:', this.data.length)
-                }
-            })
-        },
-        // 获取 OA 按钮
-        getActiveKeyAll () {
-            this.postFormAction('/activiti_process/listData', { status: 1, roles: true }).then(res => {
-                this.activeKeyAll = []
-                if (res.success) {
-                    var result = res.result || []
-                    if (result.length > 0) {
-                        this.activeKeyAll = result
-                        console.log('OA 4个按钮', result)
-                    }
-                }
-            })
+    // 拿到 消息数量
+    getDataList() {
+      this.postFormAction(this.url.todoList, {}).then(res => {
+        if (res.success) {
+          this.data = res.result || []
+          console.log('消息数量:', this.data.length)
+        }
+      })
+    },
+    // 获取 OA 按钮
+    getActiveKeyAll() {
+      this.postFormAction('/activiti_process/listData', { status: 1, roles: true }).then(res => {
+        this.activeKeyAll = []
+        if (res.success) {
+          var result = res.result || []
+          if (result.length > 0) {
+            this.activeKeyAll = result
+            console.log('OA 4个按钮', result)
+          }
         }
+      })
+    },
+    //OA图标点击事件
+    aClick(v) {
+      //点击的该项按钮
+      console.log(v)
+      // this.$refs.modal.add("1")
+      if (!v.routeName) {
+        this.$message.warning('该流程信息未配置表单,请联系开发人员!')
+        return
+      }
+      if (v.routeName.indexOf('外部表单') != -1) {
+        alert('调用其他项目页面')
+      } else if (v.routeName.indexOf('自定义') != -1) {
+        this.lcModal.disabled = false
+        let com = { component: () => import(`@/views/activiti/form/demoForm2`) }
+        this.lcModal.formComponent = com.component
+        this.lcModal.title = '发起流程:' + v.name
+        this.lcModal.isNew = true
+        this.lcModal.processData = v
+        this.lcModal.visible = true
+      } else {
+        this.lcModal.disabled = false
+        this.lcModal.formComponent = this.getFormComponent(v.routeName).component
+        this.lcModal.title = '发起流程:' + v.name
+        this.lcModal.isNew = true
+        this.lcModal.processData = v
+        this.lcModal.visible = true
+      }
+      console.log('发起', v)
+    },
+
+    //
+    // aClick (v) {
+    //     console.log('获得点击item的基本信息', v)
+    //     console.log('路由名称:', v.routeName)
+    //     this.visible = true
+    // },
+    // handleOk (e) {
+    //     this.loading = true
+    //     setTimeout(() => {
+    //         this.visible = false
+    //         this.loading = false
+    //     }, 3000)
+    // },
+    // handleCancel(e) {
+    //   this.visible = false
+    // },
+    //提交后
+    afterSub(formData) {
+      this.lcModal.visible = false
+      // this.loadData();
     }
+  }
 }
 </script>
 

+ 147 - 26
src/views/user/Todo.vue

@@ -3,7 +3,15 @@
     <div class="main">
       <a-layout-header style="padding:0;color:white;background:#347b98;">
         <a-icon type="left" @click="$router.go(-1)" style="fontSize:24px;color:white;marginLeft:2%;" />
-        <span style="fontSize:20px;fontWeight:700;marginLeft:34%;marginTop:4px;color:white;">待办事项</span>
+        <span
+          style="fontSize:20px;
+          fontWeight:700;
+          marginLeft:34%;
+          marginTop:4px;
+          color:white;"
+        >
+          待办事项
+        </span>
       </a-layout-header>
 
       <!-- tabs 部分 -->
@@ -14,22 +22,66 @@
           <a-tab-pane key="apply" tab="我的申请">
             <div v-for="item in applyList" :key="item.id">
               <a-card
-                style="width: 100%;border-radius:20px;text-align:left;marginBottom:20px;border:none;background-color:rgba(247, 224, 212,.8);"
-              >
-                <p style="fontSize:16px;fontWeight:700;color092834;">
-                  <a-icon type="highlight" class="cardIcon" />所属流程:{{ item.processName }}
+                style="width: 100%;
+                border-radius:20px;
+                text-align:left;
+                marginBottom:20px;
+                border:none;
+                background-color:rgba(247, 224, 212,.8);">
+
+                <p
+                  style="fontSize:16px;fontWeight:700;                color:#092834;">
+
+                  <a-icon type="highlight" class="cardIcon" />
+                  所属流程:{{ item.processName }}
                 </p>
                 <p>标题:{{ item.title }}</p>
                 <p>创建时间:{{ item.createTime }}</p>
-                <p>状态:{{ item.status }}</p>
+
+                <!-- 申请状态 -->
+                <p>
+                  状态:
+
+                  <span v-if="item.status == 0" class="statusComm">
+                    草稿
+                  </span>
+
+                  <span v-if="item.status == 1" class="statusComm" style="background:rgb(252, 96, 10,.1);">
+                    处理中
+                  </span>
+
+                  <span v-if="item.status == 2" class="statusComm" style="background:rgb(9, 40, 52,.1);">
+                    已结束
+                  </span>
+
+                  <span v-if="item.status == 3" class="statusComm">
+                    已撤回
+                  </span>
+                </p>
 
                 <a-divider class="dividerBgcO"></a-divider>
+
+                <!-- 申请结果 -->
                 <p style="float:left;">
                   结果:
-                  <span style="background:#fc600a;padding:4px 10px;borderRadius:6px;color:white;">{{
-                    item.result
-                  }}</span>
+
+                  <span class="resultComm" v-if="item.result == 0" style="background:rgba(52, 123, 152,.7);">
+                    未提交
+                  </span>
+
+                  <span class="resultComm" v-else-if="item.result == 1" style="background:rgb(252, 96, 10,.8);">
+                    处理中
+                  </span>
+
+                  <span class="resultComm" v-else-if="item.result == 2" style="background:rgb(9, 40, 52,.8);">
+                    通过
+                  </span>
+
+                  <span class="resultComm" v-else-if="item.result == 3" style="background:rgba(9, 40, 52,.7);">
+                    驳回
+                  </span>
                 </p>
+
                 <p style="float:right;">发起人:{{ item.createBy }}</p>
               </a-card>
             </div>
@@ -39,11 +91,14 @@
           <a-tab-pane key="wait" tab="我的待办" force-render>
             <div v-for="item in todoList" :key="item.id">
               <a-card
-                style="width: 100%;borderRadius:20px;text-align:left;marginBottom:20px;border:none;color:#092834;
-                background-color:rgba(247, 224, 212,.8);
-            "
+                style="width: 100%;
+                borderRadius:20px;
+                text-align:left;
+                marginBottom:20px;
+                border:none;
+                background-color:rgba(247, 224, 212,.8);"
               >
-                <p style="fontSize:16px;fontWeight:700;color:#092834;">
+                <p style="fontSize:16px;fontWeight:700;                color:#092834;">
                   <a-icon type="bell" class="cardIcon" />
                   所属流程:{{ item.processName }}
                 </p>
@@ -52,11 +107,48 @@
 
                 <a-divider class="dividerBgcO"></a-divider>
 
+                <!-- 优先级 -->
                 <p style="float:left;">
                   优先级:
-                  <span style="background:#fc600a;padding:4px 10px;borderRadius:6px;color:white;">{{
-                    item.priority
-                  }}</span>
+                  <span
+                    class="priorityComm"
+                    v-if="item.priority == 0"
+                    style="background:rgba(20, 137, 184,.8);
+                    padding:4px 10px;
+                    borderRadius:6px;
+                    color:white;"
+                  >
+                    普通
+                  </span>
+                  <span
+                    class="priorityComm"
+                    v-else-if="item.priority == 1"
+                    style="background:#FC600A;
+                    padding:4px 10px;
+                    borderRadius:6px;
+                    color:white;"
+                  >
+                    重要
+                  </span>
+
+                  <span
+                    class="priorityComm"
+                    v-else-if="item.priority == 2"
+                    style="background:red;
+                    padding:4px 10px;
+                    borderRadius:6px;
+                    color:white;"
+                  >
+                    紧急
+                  </span>
+                  <span
+                    class="priorityComm"
+                    v-else
+                    style="background:#999;
+                   "
+                  >
+                    无
+                  </span>
                 </p>
                 <p style="float:right;">发起人:{{ item.applyer }}</p>
               </a-card>
@@ -67,9 +159,14 @@
           <a-tab-pane key="done" tab="我的已办">
             <div v-for="item in doneList" :key="item.id">
               <a-card
-                style="width: 100%;border-radius:20px;text-align:left;marginBottom:20px;border:none;background-color:rgba(247, 224, 212,.8);"
+                style="width: 100%;
+                border-radius:20px;
+                text-align:left;
+                marginBottom:20px;
+                border:none;
+                background-color:rgba(247, 224, 212,.8);"
               >
-                <p style="fontSize:16px;fontWeight:700;color:092834;">
+                <p style="fontSize:16px;fontWeight:700;                color:#092834;">
                   <a-icon type="check" class="cardIcon" />
                   任务名称:{{ item.name }}
                 </p>
@@ -79,9 +176,16 @@
                 <a-divider class="dividerBgcO"></a-divider>
 
                 <p style="float:left;">
-                  审批操作:<span style="background:#fc600a;padding:4px 4px;borderRadius:6px;color:white;">{{
-                    item.deleteReason
-                  }}</span>
+                  审批操作:
+                  <span
+                    style="background:rgba(252, 96, 10,.6);
+                    padding:4px 4px;
+                    borderRadius:6px;
+                    letterSpacing:1px;
+                    color:white;"
+                  >
+                    {{ item.deleteReason }}
+                  </span>
                 </p>
                 <p style="float:right;">发起人:{{ item.applyer }}</p>
               </a-card>
@@ -199,10 +303,27 @@ export default {
   background-color: rgb(200, 245, 221);
   color: rgb(22, 139, 85);
 }
-.contain {
-  height: 100%;
-  position: relative;
-  min-height: 100%;
-  padding: 14px;
+
+//优先级的公共样式
+.priorityComm {
+  padding: 4px 10px;
+  border-radius: 6px;
+  color: white;
+  letter-spacing: 1px;
+}
+
+// 结果公共样式
+.resultComm {
+  padding: 4px 10px;
+  border-radius: 6px;
+  color: white;
+  letter-spacing: 1px;
+}
+
+// 状态公共样式
+.statusComm {
+  border-radius: 2px;
+  padding: 2px 6px;
+  color: #092834;
 }
 </style>