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-01-25 15:27:39
-->
<template>
  <div>
    <el-form ref="scform" :model="form">
      <el-form-item label="选择项目：">
        <el-select v-model="form.projectId" placeholder="请选择项目">
          <el-option v-for="item in projectList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </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>
        </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;">
          <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 in child.label" :label="label"></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 in ass.role" :label="role.slice(-2)">{{ 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-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>
    </el-dialog>
  </div>
</template>

<script>
import { SCContent } from '@/assets/datas/SCContent'
import { MessageBox } from 'element-ui'
import ScTable from './scTable.vue';
export default {
  dicts: ['cmc_skill'],
  components: { ScTable },
  data() {
    return {
      checkedBtn: [],
      AssessmentContent: SCContent,
      projectList: [],
      form: {
        f07: []
      },
      noNullForm: {},
      taskOpen: false,
      tipsShow: false,
      inputTips: false
    };
  },
  created() {
    this.initForm();
  },
  watch: {},
  mounted() {
  },
  methods: {
    initForm() {
      for (let i = 0; i < SCContent.length; i++) {
        if (i.toString().length == 1) {
          this.$set(this.form, 'role' + '0' + i, []);
        }
        else {
          this.$set(this.form, 'role' + i, []);
        }
      }
    },
    // 提交表单
    submit() {
      MessageBox.confirm('是否确认提交？', '任务提交', { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning' }).then(() => {

        // this.$emit('submit', noNullForm);
      }).catch(() => {
      });
    },
    // 生成考核表格
    generateForm() {
      if (this.checkedBtn.length == 0) {
        this.tipsShow = true;
        return
      }
      this.taskOpen = true;
      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])
        }
      }
      console.log(this.noNullForm);
    },
    closeItem(item) {
      debugger;
      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) {
      console.log(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)
      }
    }
  }
}
</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>