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

<!--
 * @Author: ysh
 * @Date: 2024-01-19 16:29:01
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-02-01 15:06:32
-->
<template>
  <div>
    <el-form ref="scform" :model="form">
      <el-form-item label="选择项目：">
        <el-select v-model="form.projectId" placeholder="请选择项目" style="width:900px" @change="getProjectById(form.projectId)">
          <el-option v-for="item in projectList" :key="item.projectId" :label="item.projectNumber + item.projectName"
            :value="item.projectId">
          </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">{{ 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, 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>
          </div>
          <el-scrollbar style="height: 500px;">
            <div v-for="ass in AssessmentContent" v-if="ass.label == item">
              <table border="1" cellspacing="0" align="center" cellpadding="5">
                <tr style="background-color:#409EFF;color:#fff;">
                  <td>等级、比例尺等</td>
                  <td>工作量</td>
                  <td>单位</td>
                </tr>
                <tr v-for="child in ass.children">
                  <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, index in child.label" :label="label" :key="'k' + index"></el-checkbox>
                    </el-checkbox-group>
                  </td>
                  <td v-if="Array.isArray(child.label)">
                    <el-input v-model="form[child.value]" style="width: 100%"></el-input>
                  </td>
                  <td v-if="!Array.isArray(child.label)">
                    <el-input v-model="form[child.value]" style="width: 100%"></el-input>
                  </td>
                  <td>{{ child.unit }}</td>
                </tr>
                <tr>
                  <td>熟练程度</td>
                  <td colspan="2">
                    <el-radio-group v-model="form['familiar' + ass.value.slice(-2)]">
                      <el-radio :label="0">生疏</el-radio>
                      <el-radio :label="2">熟练</el-radio>
                    </el-radio-group>
                  </td>
                </tr>
                <tr>
                  <td>承担角色</td>
                  <td colspan="2">
                    <el-checkbox-group v-model="form['role' + ass.value.slice(-2)]">
                      <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>
                <tr>
                  <td>备注</td>
                  <td colspan="2">
                    <el-input type="textarea" :rows="2" placeholder="请输入内容"
                      v-model="form['remark' + ass.value.slice(-2)]">
                    </el-input>
                  </td>
                </tr>
              </table>
              <div class="tips" v-if="inputTips">工作量只能输入数字</div>
            </div>
          </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" ref="scTable" @submit="submit"></ScTable>
    </el-dialog>
  </div>
</template>

<script>
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'
import { listProject } from '@/api/oa/project/project.js'
import { getProject } from '@/api/oa/project/project'
export default {
  dicts: ['cmc_skill'],
  components: { ScTable },
  data() {
    return {
      checkedBtn: [],
      AssessmentContent: SCContent,
      projectList: [],
      form: {},
      noNullForm: {},
      taskOpen: false,
      tipsShow: false,
      inputTips: false
    };
  },
  created() {
    this.initForm();
  },
  watch: {},
  mounted() {

  },
  methods: {
    initForm() {
      listProject({ pageSize: 200 }).then(res => {
        this.projectList = res.rows;
      })
      for (let i = 0; i < SCContent.length + 1; i++) {
        if (i.toString().length == 1) {
          this.$set(this.form, 'role' + '0' + i, []);
        }
        else {
          this.$set(this.form, 'role' + i, []);
        }
      }
    },
    // 提交表单
    submit(tableForm) {
      MessageBox.confirm('确认提交？', '任务提交', { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning' }).then(() => {
        tableForm.formId = new Snowflake(1n, 1n, 0n).nextId().toString();
        tableForm.disabled = true;
        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
      }
      for (let f in this.form) {
        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])
        }
      }
      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();
        }
      }
    },
    getProjectById(id) {
      getProject(id).then(res => {
        if (res.data != undefined) {
          this.form.projectName = res.data.projectName;
          this.form.projectNumber = res.data.projectNumber;
        }
      })
    },
    closeItem(item) {
      let index = this.checkedBtn.indexOf(item);
      let number;
      if (index !== -1) {
        this.checkedBtn.splice(index, 1);
      }
      for (let i of SCContent) {
        if (i.label == item) {
          number = i.value;
        }
      }
      for (let fkey in this.form) {
        if (fkey.substring(0, 3) == number) {
          if (typeof (this.form[fkey]) == 'string') {
            this.form[fkey] = "";
          }
          else if (Array.isArray(this.form[fkey])) {
            this.form[fkey] = [];
          }
        }
        this.form['role' + number.substring(1, 3)] = [];
        this.form['familiar' + number.substring(1, 3)] = undefined;
        this.form['remark' + number.substring(1, 3)] = "";
      }
    },
    assessChangeFn(val) {
      if (val.length != 0) {
        this.tipsShow = false;
      }
    },
    getRoleLabel(role) {
      let len = role.length;
      return role.substring(0, len - 2);
    },
    mustNumber(val, event) {
      let regex = /^\d+(\.\d{1,2})?$/;
      let newElement = document.createElement("div");
      newElement.innerHTML = '工作量必须是数字';
      newElement.classList.add('inputTips');
      if (regex.test(val) || val == "") {
        this.inputTips = false;
      } else {
        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)
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.tips {
  color: #f00;
  font-size: 12px;
  line-height: 18px;
}
</style>
<style>
.inputTips {
  color: #f00;
  font-size: 12px;
  line-height: 18px;
  display: block;
}
</style>