修改生产部门表格界面

oa-ui/src/views/flowable/form/scForm.vue

  * @Author: ysh
  * @Date: 2024-01-19 16:29:01
  * @LastEditors: Please set LastEditors
- * @LastEditTime: 2024-01-25 16:49:50
+ * @LastEditTime: 2024-01-29 15:46:38
 -->
 <template>
   <div>
           </el-option>
         </el-select>
       </el-form-item>
+      <el-form-item label="工作自述：">
+        <el-input style="width:900px" type="textarea" :rows="2" placeholder="请输入内容" v-model="form['selfAssess']">
+        </el-input>
+      </el-form-item>
       <el-form-item label="选择考核项：">
         <el-checkbox-group v-model="checkedBtn" @change="assessChangeFn">
-          <el-checkbox v-for="sc, index in AssessmentContent" :label="sc.label" :key="index" :value="sc.value">{{ sc.label
+          <el-checkbox v-for="sc, index in AssessmentContent" :label="sc.label" :key="index">{{ sc.label
           }}</el-checkbox>
         </el-checkbox-group>
       </el-form-item>
       <div class="tips" v-if="tipsShow">请至少选择一项考核项</div>
       <el-row type="flex" style="flex-wrap:wrap;">
-        <el-card v-for="item in checkedBtn" style="flex:1;margin:10px;min-width: 400px;max-width: 450px;">
+        <el-card v-for="item, index in checkedBtn" style="flex:1;margin:10px;min-width: 400px;max-width: 450px;"
+          :key="index">
           <div slot="header" class="clearfix">
             <strong>{{ item }}</strong>
             <el-button style="float: right; padding: 3px 0" type="text" @click="closeItem(item)">关闭</el-button>
                   <td v-if="!Array.isArray(child.label)">{{ child.label }}</td>
                   <td v-else>
                     <el-checkbox-group v-model="form.f07">
-                      <el-checkbox v-for="label in child.label" :label="label"></el-checkbox>
+                      <el-checkbox v-for="label, index in child.label" :label="label" :key="'k' + index"></el-checkbox>
                     </el-checkbox-group>
                   </td>
                   <td v-if="Array.isArray(child.label)">
                   <td>承担角色</td>
                   <td colspan="2">
                     <el-checkbox-group v-model="form['role' + ass.value.slice(-2)]">
-                      <el-checkbox v-for="role in ass.role" :label="role.slice(-2)">{{ getRoleLabel(role) }}</el-checkbox>
+                      <el-checkbox v-for="role, index in ass.role" :label="role.slice(-2)" :key="'kk' + index">{{
+                        getRoleLabel(role) }}</el-checkbox>
                     </el-checkbox-group>
                   </td>
                 </tr>
           </el-scrollbar>
         </el-card>
       </el-row>
+      <el-form-item label="其他工作：">
+        <el-input style="width:900px" type="textarea" :rows="2" placeholder="请输入内容" v-model="form['otherWork']">
+        </el-input>
+      </el-form-item>
       <el-row>
         <el-button @click="generateForm" type="primary">生成考核表</el-button>
       </el-row>
     </el-form>
     <el-dialog title="" :visible.sync="taskOpen" width="65%" append-to-body>
-      <ScTable :tableForm="noNullForm"></ScTable>
+      <ScTable :tableForm="noNullForm" ref="scTable" @submit="submit"></ScTable>
     </el-dialog>
   </div>
 </template>
 import { SCContent } from '@/assets/datas/SCContent'
 import { MessageBox } from 'element-ui'
 import ScTable from './scTable.vue';
+import { Snowflake } from '@/utils/snowFlake.js'
+import { submitAssess } from '@/api/oa/assess/assess.js'
 export default {
   dicts: ['cmc_skill'],
   components: { ScTable },
   },
   watch: {},
   mounted() {
+
   },
   methods: {
     initForm() {
-      for (let i = 0; i < SCContent.length; i++) {
+      for (let i = 0; i < SCContent.length + 1; i++) {
         if (i.toString().length == 1) {
           this.$set(this.form, 'role' + '0' + i, []);
         }
       }
     },
     // 提交表单
-    submit() {
-      MessageBox.confirm('是否确认提交？', '任务提交', { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning' }).then(() => {
-
-        // this.$emit('submit', noNullForm);
+    submit(tableForm) {
+      MessageBox.confirm('确认提交？', '任务提交', { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning' }).then(() => {
+        tableForm.formId = new Snowflake(1n, 1n, 0n).nextId().toString();
+        console.log(tableForm);
+        let formData = new FormData();
+        let form = JSON.stringify(tableForm);
+        formData.append("form", form);
+        submitAssess(formData).then(res => {
+          this.taskOpen = false;
+          this.$emit('submit', tableForm);
+        });
       }).catch(() => {
       });
     },
     // 生成考核表格
     generateForm() {
+      let flag = 0;
       if (this.checkedBtn.length == 0) {
         this.tipsShow = true;
         return
       }
-      this.taskOpen = true;
-      console.log(this.form);
       for (let f in this.form) {
-        if (this.form[f] != "" && this.form[f] != [] && this.form[f] != undefined) {
+        if (this.form[f] != "" && this.form[f] != [] && this.form[f] !== undefined) {
+          this.$set(this.noNullForm, f, this.form[f])
+        }
+        if (f.indexOf('familiar') != -1) {
           this.$set(this.noNullForm, f, this.form[f])
         }
       }
-      console.log(this.noNullForm);
+      for (let btn of this.checkedBtn) {
+        let ids = this.changeLabelToValue(btn);
+        if (this.form['familiar' + ids] == undefined || this.form['role' + ids].length == 0) {
+          this.$message.error('承担角色和熟练程度为必填项，请完善！');
+          flag = 0
+          break
+        } else {
+          flag = 1
+        }
+      }
+      if (flag) {
+        this.taskOpen = true;
+        if (this.$refs.scTable != undefined) {
+          this.$refs.scTable.formatForm();
+        }
+      }
     },
     closeItem(item) {
       let index = this.checkedBtn.indexOf(item);
       return role.substring(0, len - 2);
     },
     mustNumber(val, event) {
-      console.log(event);
       let regex = /^\d+(\.\d{1,2})?$/;
       let newElement = document.createElement("div");
       newElement.innerHTML = '工作量必须是数字';
         this.inputTips = true;
         event.target.parentNode.appendChild(newElement, event.target)
       }
+    },
+    changeLabelToValue(label) {
+      for (let s of SCContent) {
+        if (s.label == label) {
+          return s.value.slice(-2)
+        }
+      }
     }
   }
 }

oa-ui/src/views/flowable/task/myProcess/detail/index.vue

          </el-col>
         </el-tab-pane> -->
         <el-tab-pane label="表单信息" name="1">
-          <ScTable></ScTable>
+          <!-- <ScTable></ScTable> -->
         </el-tab-pane>
         <!--流程流转记录-->
         <el-tab-pane label="流转记录" name="2">

oa-ui/src/views/flowable/task/myProcess/send/index.vue

           </el-col>
         </el-tab-pane> -->
         <el-tab-pane label="表单信息" name="1">
-            <scform @submit="submits"></scform>
+          <scform @submit="submits"></scform>
         </el-tab-pane>
         <!--流程图-->
         <el-tab-pane label="流程图" name="2">
   },
   methods: {
     submits(form) {
-      console.log(form);
       getNextFlowNodeByStart({ deploymentId: this.deployId, variables: {} }).then(res => {
-        console.log(res);
-        debugger
         let data = res.data
-        this.formData = { aaa: '1111' };
         if (data.dataType === 'dynamic') {
           if (data.type === 'assignee') { // 指定人员
             this.checkSendUser = true;

oa-ui/src/views/flowable/task/todo/detail/index.vue

       </div>
       <el-tabs tab-position="top" v-model="activeName" @tab-click="handleClick">
         <!--表单信息-->
-        <el-tab-pane label="表单信息" name="1">
+        <!-- <el-tab-pane label="表单信息" name="1">
           <el-col :span="16" :offset="4">
             <div class="test-form">
-              <!--              <parser :key="new Date().getTime()" :form-conf="variablesData"/>-->
-              <parser :key="new Date().getTime()" :form-conf="variablesData" @submit="submitForm" ref="parser"/>
+                           <parser :key="new Date().getTime()" :form-conf="variablesData"/>
+              <parser :key="new Date().getTime()" :form-conf="variablesData" @submit="submitForm" ref="parser" />
 
             </div>
             <div style="margin-left:15%;margin-bottom: 20px;font-size: 14px;">
               <el-button v-if="!formKeyExist" icon="el-icon-edit-outline" type="success" size="mini"
-                         @click="handleComplete">审批
+                @click="handleComplete">审批
               </el-button>
-              <!--                <el-button  icon="el-icon-edit-outline" type="primary" size="mini" @click="handleDelegate">委派</el-button>-->
-              <!--                <el-button  icon="el-icon-edit-outline" type="primary" size="mini" @click="handleAssign">转办</el-button>-->
-              <!--                <el-button  icon="el-icon-edit-outline" type="primary" size="mini" @click="handleDelegate">签收</el-button>-->
-                           <el-button icon="el-icon-refresh-left" type="warning" size="mini" @click="handleReturn">退回</el-button>
-                           <el-button icon="el-icon-circle-close" type="danger" size="mini" @click="handleReject">驳回</el-button>
+                             <el-button  icon="el-icon-edit-outline" type="primary" size="mini" @click="handleDelegate">委派</el-button>
+                             <el-button  icon="el-icon-edit-outline" type="primary" size="mini" @click="handleAssign">转办</el-button>
+                             <el-button  icon="el-icon-edit-outline" type="primary" size="mini" @click="handleDelegate">签收</el-button>
+              <el-button icon="el-icon-refresh-left" type="warning" size="mini" @click="handleReturn">退回</el-button>
+              <el-button icon="el-icon-circle-close" type="danger" size="mini" @click="handleReject">驳回</el-button>
             </div>
           </el-col>
+        </el-tab-pane> -->
+        <el-tab-pane label="表单信息" name="1">
+          
         </el-tab-pane>
         <!--流程流转记录-->
         <el-tab-pane label="流转记录" name="2">
           <el-col :span="16" :offset="4">
             <div class="block">
               <el-timeline>
-                <el-timeline-item
-                  v-for="(item,index ) in flowRecordList"
-                  :key="index"
-                  :icon="setIcon(item.finishTime)"
-                  :color="setColor(item.finishTime)"
-                >
+                <el-timeline-item v-for="(item, index ) in flowRecordList" :key="index" :icon="setIcon(item.finishTime)"
+                  :color="setColor(item.finishTime)">
                   <p style="font-weight: 700">{{ item.taskName }}</p>
                   <el-card :body-style="{ padding: '10px' }">
                     <el-descriptions class="margin-top" :column="1" size="small" border>
         </el-tab-pane>
         <!--流程图-->
         <el-tab-pane label="流程图" name="3">
-          <flow :flowData="flowData"/>
+          <flow :flowData="flowData" />
         </el-tab-pane>
       </el-tabs>
       <!--审批任务-->
             <el-checkbox v-model="taskForm.check">备选项</el-checkbox>
           </el-form-item>
           <el-form-item label="处理意见" label-width="80px" prop="comment"
-                        :rules="[{ required: true, message: '请输入处理意见', trigger: 'blur' }]">
-            <el-input type="textarea" v-model="taskForm.comment" placeholder="请输入处理意见"/>
+            :rules="[{ required: true, message: '请输入处理意见', trigger: 'blur' }]">
+            <el-input type="textarea" v-model="taskForm.comment" placeholder="请输入处理意见" />
           </el-form-item>
         </el-form>
         <span slot="footer" class="dialog-footer">
         <el-form ref="taskForm" :model="taskForm" label-width="80px">
           <el-form-item label="退回节点" prop="targetKey">
             <el-radio-group v-model="taskForm.targetKey">
-              <el-radio-button
-                v-for="item in returnTaskList"
-                :key="item.id"
-                :label="item.id"
-              >{{ item.name }}
+              <el-radio-button v-for="item in returnTaskList" :key="item.id" :label="item.id">{{ item.name }}
               </el-radio-button>
             </el-radio-group>
           </el-form-item>
-          <el-form-item label="退回意见" prop="comment"
-                        :rules="[{ required: true, message: '请输入意见', trigger: 'blur' }]">
-            <el-input style="width: 50%" type="textarea" v-model="taskForm.comment" placeholder="请输入意见"/>
+          <el-form-item label="退回意见" prop="comment" :rules="[{ required: true, message: '请输入意见', trigger: 'blur' }]">
+            <el-input style="width: 50%" type="textarea" v-model="taskForm.comment" placeholder="请输入意见" />
           </el-form-item>
         </el-form>
         <span slot="footer" class="dialog-footer">
-              <el-button @click="returnOpen = false">取 消</el-button>
-              <el-button type="primary" @click="taskReturn">确 定</el-button>
-          </span>
+          <el-button @click="returnOpen = false">取 消</el-button>
+          <el-button type="primary" @click="taskReturn">确 定</el-button>
+        </span>
       </el-dialog>
       <!--驳回流程-->
       <el-dialog :title="rejectTitle" :visible.sync="rejectOpen" width="40%" append-to-body>
         <el-form ref="taskForm" :model="taskForm" label-width="80px">
-          <el-form-item label="驳回意见" prop="comment"
-                        :rules="[{ required: true, message: '请输入意见', trigger: 'blur' }]">
-            <el-input style="width: 50%" type="textarea" v-model="taskForm.comment" placeholder="请输入意见"/>
+          <el-form-item label="驳回意见" prop="comment" :rules="[{ required: true, message: '请输入意见', trigger: 'blur' }]">
+            <el-input style="width: 50%" type="textarea" v-model="taskForm.comment" placeholder="请输入意见" />
           </el-form-item>
         </el-form>
         <span slot="footer" class="dialog-footer">
-            <el-button @click="rejectOpen = false">取 消</el-button>
-            <el-button type="primary" @click="taskReject">确 定</el-button>
-          </span>
+          <el-button @click="rejectOpen = false">取 消</el-button>
+          <el-button type="primary" @click="taskReject">确 定</el-button>
+        </span>
       </el-dialog>
     </el-card>
   </div>
 </template>
 
 <script>
-import {flowRecord} from "@/api/flowable/finished";
+import { flowRecord } from "@/api/flowable/finished";
 import FlowUser from '@/components/flow/User'
 import FlowRole from '@/components/flow/Role'
 import Parser from '@/components/parser/Parser'
-import {getProcessVariables, flowXmlAndNode, definitionStart} from "@/api/flowable/definition";
+import { getProcessVariables, flowXmlAndNode, definitionStart } from "@/api/flowable/definition";
 import {
   complete,
   rejectTask,
 } from "@/api/flowable/todo";
 import flow from '@/views/flowable/task/todo/detail/flow'
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
-import {listUser} from "@/api/system/user";
+import { listUser } from "@/api/system/user";
 
 export default {
   name: "Record",
         variables: {
           variables: {}
         },
-        check:true
+        check: true
       },
       assignee: null,
       formConf: {}, // 默认表单数据
   methods: {
     handleClick(tab, event) {
       if (tab.name === '3') {
-        flowXmlAndNode({procInsId: this.taskForm.procInsId, deployId: this.taskForm.deployId}).then(res => {
+        flowXmlAndNode({ procInsId: this.taskForm.procInsId, deployId: this.taskForm.deployId }).then(res => {
           this.flowData = res.data;
         })
       }
     /** 流程流转记录 */
     getFlowRecordList(procInsId, deployId) {
       const that = this
-      const params = {procInsId: procInsId, deployId: deployId}
+      const params = { procInsId: procInsId, deployId: deployId }
       flowRecord(params).then(res => {
         that.flowRecordList = res.data.flowList;
       }).catch(res => {
     getFlowTaskForm(taskId) {
       if (taskId) {
         // 提交流程申请时填写的表单存入了流程变量中后续任务处理时需要展示
-        flowTaskForm({taskId: taskId}).then(res => {
+        flowTaskForm({ taskId: taskId }).then(res => {
+          debugger
           this.variablesData = res.data.formData;
+          console.log( res.data.formData);
           this.taskForm.variables = res.data.formData;
           this.formKeyExist = res.data.formKeyExist;
         });
       this.submitForm(null);
     },
     /** 用户审批任务 */
-    taskComplete() {      
+    taskComplete() {
       this.$set(this.taskForm.variables, "pass", "通过");
       if (!this.taskForm.variables && this.checkSendUser) {
         this.$modal.msgError("请选择流程接收人员!");
     /** 返回页面 */
     goBack() {
       // 关闭当前标签页并返回上个页面
-      const obj = { path: "/task/todo", query: { t: Date.now()} };
+      const obj = { path: "/task/todo", query: { t: Date.now() } };
       this.$tab.closeOpenPage(obj);
     },
     /** 驳回任务 */
     taskReject() {
       this.$set(this.taskForm.variables, "pass", "驳回");
       complete(this.taskForm).then(response => {
-          this.$modal.msgSuccess(response.msg);
-          this.goBack();
-        });
+        this.$modal.msgSuccess(response.msg);
+        this.goBack();
+      });
       // this.$refs["taskForm"].validate(valid => {
       //   if (valid) {
       //     rejectTask(this.taskForm).then(res => {
     /** 申请流程表单数据提交 */
     submitForm(formData) {
       // 根据当前任务或者流程设计配置的下一步节点 todo 暂时未涉及到考虑网关、表达式和多节点情况
-      const params = {taskId: this.taskForm.taskId}
+      const params = { taskId: this.taskForm.taskId }
       getNextFlowNode(params).then(res => {
         const data = res.data;
         this.taskForm.formData = formData;
   margin-bottom: 20px;
 }
 
-.el-tag + .el-tag {
+.el-tag+.el-tag {
   margin-left: 10px;
 }