cmc-oa/oa-ui/src/views/flowable/form/projectProcess/actualWork.vue

<template>
  <div style="width:100%">
    <table border="1" style="width:100%">
      <tr class="title">
        <td :colspan="8">项目实际完成工作量</td>
      </tr>
      <tr>
        <td>序号</td>
        <td style="width: 180px">工作内容</td>
        <td>等级或比例尺</td>
        <td>单位</td>
        <td>工作量</td>
        <td style="width: 100px">实际完成时间</td>
        <td>备注</td>
        <td>操作</td>
      </tr>
      <tr v-for="work, index in workList">
        <td>{{ index + 1 }}</td>
        <td>
          <el-input v-model="work.content" type="textarea" clearable :autosize="{ minRows: 4, maxRows: 10 }"></el-input>
        </td>
        <td>
          <el-select v-model="work.scale" placeholder="请选择" clearable>
            <el-option v-for="dict in dict.type.cmc_scale_grade" :key="dict.value" :label="dict.label"
              :value="dict.label" />
          </el-select>
        </td>
        <td>
          <el-select v-model="work.unit" placeholder="请选择" clearable>
            <el-option v-for="dict in dict.type.cmc_unit" :key="dict.value" :label="dict.label" :value="dict.label" />
          </el-select>
        </td>
        <td>
          <el-input v-model="work.workload" clearable></el-input>
        </td>
        <td>
          <el-date-picker style="width: 140px" v-model="work.finishTime" value-format="yyyy-MM-dd" type="date"
            placeholder="选择日期">
          </el-date-picker>
        </td>
        <td>
          <el-input v-model="work.remark" type="textarea" clearable :autosize="{ minRows: 4, maxRows: 10 }"></el-input>
        </td>
        <td>
          <div class="delete-btn" @click="deletWorkItem(index)">
            <i class="el-icon-circle-close"></i>
          </div>
        </td>
      </tr>
    </table>
    <el-button icon="el-icon-plus" type="primary" plain size="mini" @click="addWorkList"></el-button>
  </div>
</template>

<script>
import { listProjectWorkload, getProjectWorkload, addProjectWorkload, updateProjectWorkload, delProjectWorkload } from '@/api/oa/project/projectWorkload'
export default {
  dicts: ['cmc_scale_grade', 'cmc_unit'],
  props: {
    projectId: {
      type: String,
      require: true
    }
  },
  data() {
    return {
      workList: [{
        content: "",
        scale: "",
        unit: "",
        workload: "",
        deadline: undefined,
        remark: "",
      },]
    }
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      let queryParams = {
        pageNum: 1,
        pageSize: 100,
        projectId: this.projectId
      }
      listProjectWorkload(queryParams).then(res => {
        if (res.total > 0) {
          this.workList = res.rows;
        }
      })
    },
    addWorkList() {
      this.workList.push({
        content: "",
        scale: "",
        unit: "",
        workload: "",
        deadline: undefined,
        remark: "",
      });
    },
    deletWorkItem(index) {
      let arr = this.workList;
      if (arr.length == 1) {
        return;
      }
      if (index >= 0 && index < arr.length) {
        arr.splice(index, 1);
      }
    },
  },
}
</script>

<style lang="scss" scoped>
table {
  /*边框*/
  /* border: 1px solid black; */
  text-align: center;
  border-collapse: collapse;

  /*设置背景颜色*/
  /* background-color: #bfa; */
  td {
    padding: 5px;
  }
}

.title {
  background-color: #f5f7fa;
}

.delete-btn {
  color: #F56C6C;
  cursor: pointer;

  i {
    font-size: 25px;
  }
}
</style>