cmc-oa/oa-ui/src/views/flowable/form/budget/moneyTable.vue

<template>
  <div style="padding: 0 20px;">
    <el-form :model="form">
      <el-form-item>
        <table class="mb20" border="1">
          <tr class="head">
            <td colspan="11">项目计划工作量</td>
          </tr>
          <tr class="content-head">
            <td>序号</td>
            <td colspan="2">工作内容</td>
            <td>等级或比例尺</td>
            <td>单位</td>
            <td>工作量</td>
            <td>要求完成时间</td>
            <td colspan="4">备注</td>
          </tr>
          <tr v-for="(work, index) in workList" :key="index">
            <td>{{ index + 1 }}</td>
            <td colspan="2">{{ work.content }}</td>
            <td>{{ work.scale }}</td>
            <td>{{ work.unit }}</td>
            <td>{{ work.workload }}</td>
            <td> {{ work.deadline }}</td>
            <td colspan="4">{{ work.remark }}</td>
          </tr>
        </table>
      </el-form-item>
      <el-form-item>
        <table border="1">
          <tr class="head">
            <td colspan="11">内业预算绩效</td>
          </tr>
          <tr class="content-head">
            <td style="width: 100px;">工作简述</td>
            <!-- <td style="width: 100px;">工作类别</td> -->
            <td style="width: 100px;">工作内容</td>
            <td style="width: 100px;">内容细项</td>
            <td style="width: 80px;">比例尺/等级</td>
            <td style="width: 80px;">地类类型</td>
            <td style="width: 50px;">单价</td>
            <td style="width: 50px;">单位</td>
            <td style="width: 50px;">数量</td>
            <td style="width: 50px;">系数</td>
            <td style="width: 100px;">备注</td>
            <td style="width: 50px;">金额</td>
          </tr>
          <tr v-for="(work, index) in contentList" :key="index">
            <!-- 工作简述 -->
            <td style="position:relative;">
              <div class="delete-btn" @click="deletWorkItem(index)">
                <i class="el-icon-circle-close"></i>
              </div>
              <el-input type="textarea" v-model="work.content"></el-input>
            </td>
            <!-- 选择工作类别 -->
            <!-- <td>
              <el-select v-model="work.workType" :style="{ width: '100%' }"
                @change="getWorkItemList(work, work.workType)">
                <el-option v-for="item in workTypeList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </td> -->
            <!-- 选择工作项目 -->
            <td>
              <el-select v-model="work.workItem" :style="{ width: '100%' }" :remote="true"
                @change="getScaleGradeList(work, work.workItem)">
                <el-option v-for="item in workItemList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </td>
            <!-- 选择内容细项 -->
            <td>
              <el-select v-model="work.subItem" :style="{ width: '100%' }" :remote="true"
                @change="setRemarkBySubItem(work, work.subItem)">
                <el-option v-for="item in work.workSelect.subItemList" :key="item.value" :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </td>
            <!-- 选择比例尺/等级 -->
            <td>
              <el-select v-model="work.scaleGrade" :style="{ width: '100%' }"
                @change="getUnitPrice(work, work.workItem, work.subItem, work.scaleGrade, work.groundType)">
                <el-option v-for="item in work.workSelect.scaleGradeList" :key="item.value" :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </td>
            <!-- 选择地类 -->
            <td>
              <el-select v-model="work.groundType" :style="{ width: '100%' }"
                @change="getUnitPrice(work, work.workItem, work.subItem, work.scaleGrade, work.groundType)">
                <el-option key="一般地类" label="一般地类" value="0">
                </el-option>
                <el-option key="复杂地类" label="复杂地类" value="1">
                </el-option>
              </el-select>
            </td>
            <!-- 单价 -->
            <td>
              {{ work.price }}
            </td>
            <!-- 单位 -->
            <td>
              {{ work.unit }}
            </td>
            <!-- 数量 -->
            <td>
              <el-input-number :controls="false" :style="{ width: '100%' }" v-model="work.workload"
                @change="getTotal(work)"></el-input-number>
            </td>
            <!-- 系数 -->
            <td>
              <el-input-number v-model="work.coefficient" :controls="false" :precision="2" :step="0.01" :max="10"
                @blur="getTotal(work)" style="width:60px;">
              </el-input-number>
              <!-- <el-tooltip content="系数备注" placement="right-start">
                <el-button icon="el-icon-info" type="text" @click="getCoefficientRemark(work.workType)"></el-button>
              </el-tooltip> -->

            </td>
            <!-- 备注 -->
            <td>
              <el-input type="textarea" v-model="work.remark"></el-input>
            </td>
            <!-- 总额 -->
            <td>
              {{ work.settle }}
            </td>
          </tr>
          <tr>
            <td colspan="10">内业预算绩效总额</td>
            <td colspan="1">{{ Number(settle).toFixed(2) }}</td>
          </tr>
        </table>
        <el-button icon="el-icon-plus" plain type="primary" size="mini" @click="addWorkList"></el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { listProjectWork } from "@/api/oa/project/projectWork";
import { getPriceRemarkByWorkType } from '@/api/oa/price/price'
import { listBudgetSettle, addBudgetSettle, delBudgetSettle } from "@/api/oa/budget/budgetSettle.js";
// import { getWorkTypeList, getWorkItemList, getSubItemList, getScaleGradeList, getUnitPrice } from '@/api/oa/price/price'
import { getWorkTypeList, getWorkItemList, getSubItemList, getScaleGradeList, getUnitPrice } from '@/api/oa/price/checkPrice'
export default {
  props: {
    projectId: {
      type: String,
      default: ''
    },
    budgetId: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      form: {},
      workList: [],//项目概况工作列表
      workTypeList: [],
      workItemList: [],
      contentList: [
        {
          content: '',
          workType: '',
          workItem: '',
          subItem: '',
          scaleGrade: '',
          groundType: '0',
          price: '',
          unit: '',
          workload: '',
          coefficient: 1,
          settle: 0,
          workSelect: {
            // 项目列表
            projectList: [],
            // 工作类别列表
            workTypeList: [],
            // 工作项目
            workItemList: [],
            // 项目细项
            subItemList: [],
            // 比例尺
            scaleGradeList: [],
          }
        }
      ],
      settle: 0,
    }
  },
  watch: {
    budgetId() {
      this.initTable();
    },
    settle(newval) {
      this.$emit('settleExpense', newval)
    },
    contentList: {
      handler(newVal) {
        let list = newVal.filter(item => item.checkPriceId);
        this.$emit('contentList', list)
      },
      immediate: true, // 立即生效
      deep: true  //监听对象或数组的时候，要用到深度监听
    }
  },
  created() {
    this.initTable();
    // this.initWorkTypeList();
    this.initWorkItemList();
  },
  methods: {
    initTable() {
      if (this.projectId != '') {
        listProjectWork({ pageSize: 999, projectId: this.projectId }).then(res => {
          this.workList = res.rows;
        })
      }
      if (this.budgetId != '') {
        listBudgetSettle({ pageSize: 100, budgetId: this.budgetId }).then(res => {
          if (res.total != 0) {
            this.contentList = res.rows;
            this.initContenList();
            this.getSettleSum();
          }
        })
      }
    },
    initContenList() {
      for (let c of this.contentList) {
        this.$set(c, 'workSelect', {
          // 项目列表
          projectList: [],
          // 工作类别列表
          workTypeList: [],
          // 工作项目
          workItemList: [],
          // 项目细项
          subItemList: [],
          // 比例尺
          scaleGradeList: [],
          workTypeLoading: true,
          subItemLoading: true,
          scaleGradeLoading: true,
        })
        if (c.checkPriceId) {
          this.$set(c, 'workType', c.cmcCheckPrice.workType)
          this.$set(c, 'workItem', c.cmcCheckPrice.workItem)
          this.$set(c, 'subItem', c.cmcCheckPrice.subItem)
          this.$set(c, 'scaleGrade', c.cmcCheckPrice.scaleGrade)
          this.$set(c, 'unit', c.cmcCheckPrice.unit)
          if (c.groundType == '0') {
            this.$set(c, 'price', c.cmcCheckPrice.commonPrice)
          } else {
            this.$set(c, 'price', c.cmcCheckPrice.complexPrice)
          }
        } else {
          this.$set(c, 'workType', c.cmcPrice.workType)
          this.$set(c, 'scaleGrade', c.cmcPrice.scaleGrade)
          this.$set(c, 'workItem', c.cmcPrice.workItem)
          this.$set(c, 'unit', c.cmcPrice.unit)
          this.$set(c, 'groundType', c.cmcPrice.groundType)
          if (c.groundType == '0') {
            this.$set(c, 'price', c.cmcPrice.commonPrice)
          } else {
            this.$set(c, 'price', c.cmcPrice.complexPrice)
          }
        }
        this.getTotal(c)
      }
    },
    /* 获取工作类别 */
    initWorkTypeList() {
      getWorkTypeList().then(res => {
        if (res) {
          this.workTypeList = this.setArray(res);
        }
      });
    },
    initWorkItemList() {
      getWorkItemList({ workType: '内业' }).then(res => {
        if (res) {
          this.workItemList = this.setArray(res);
        }
      })
    },
    /* 获取工作项目 */
    getWorkItemList(work, workType) {
      getWorkItemList({ workType: workType }).then(res => {
        if (res) {
          let workItemList = this.setArray(res);
          work.workSelect.workItemList = workItemList;
          work.workItem = workItemList[0].label;
          work.subItem = '';
          this.getScaleGradeList(work, work.workItem);
        }
      })
    },
    // 获取内容细项
    getWorkSubItemList(work, workItem) {
      getSubItemList({ workItem }).then(res => {
        if (res) {
          let subItemList = this.setArray(res);
          work.workSelect.subItemList = subItemList;
          this.$set(work, 'subItem', subItemList[0].label);
          this.$set(work, 'remark', subItemList[0].remark);
        }
      })
    },
    // 设置备注
    setRemarkBySubItem(work) {
      this.getUnitPrice(work, work.workItem, work.subItem, work.scaleGrade, work.groundType);
    },
    /* 获取比例尺 */
    getScaleGradeList(work, workItem) {
      this.getWorkSubItemList(work, workItem);
      if (work.scale) {
        this.$set(work, 'scaleGrade', work.scale);
        if (work.groundType == undefined) {
          this.$set(work, 'groundType', '0');
        }
        this.getUnitPrice(work, work.workItem, work.subItem, work.scaleGrade, work.groundType);
      } else {
        getScaleGradeList({ workItem }).then(res => {
          if (res) {
            let scaleGradeList = this.setArray(res);
            work.workSelect.scaleGradeLoading = false;
            work.workSelect.scaleGradeList = scaleGradeList;
            this.$set(work, 'scaleGrade', scaleGradeList[0].label);
            if (work.scaleGrade == undefined) {
              this.$set(work, 'scaleGrade', '无');
            }
            if (work.groundType == undefined) {
              this.$set(work, 'groundType', '0');
            }
            this.getUnitPrice(work, work.workItem, work.subItem, work.scaleGrade, work.groundType);
          }
        })
      }
    },
    /* 获取单价 */
    getUnitPrice(work, workItem, subItem, scaleGrade, groundType) {
      getUnitPrice({ workItem, subItem, scaleGrade, groundType: groundType }).then(res => {
        if (res.length != 0) {
          work.checkPriceId = res.data.id;
          this.$set(work, 'price', res.data.price)
          this.$set(work, 'unit', res.data.unit)
          this.$set(work, 'coefficient', 1)
          this.$set(work, 'remark', res.data.remark)
          if (work.workload != undefined || work.workload != '') {
            this.getTotal(work);
          }
        }
      })
    },
    /* 获取总额 */
    getTotal(work) {
      let total = this.calculateTotal(work.price, work.coefficient, work.workload, 1);
      this.$set(work, 'settle', total)
      this.getSettleSum();
    },
    /* 计算总额 */
    calculateTotal(price, coefficient, workload, percent) {
      return ((parseFloat(price) * parseFloat(coefficient) * parseFloat(workload)) * percent).toFixed(2);
    },

    getSettleSum() {
      let sum = 0;
      for (let work of this.contentList) {
        sum = sum + Number(work.settle)
      }
      this.settle = sum.toFixed(2);
      let obj = {}
      obj.workList = this.contentList;
      obj.settle = this.settle;
      this.$emit('getSettle', obj);
      this.$emit('getWorkList', this.contentList)
    },

    getCoefficientRemark(workType) {
      getPriceRemarkByWorkType({ workType }).then(res => {
        if (res.code == 200) {
          if (workType != undefined)
            this.$notify({
              title: workType,
              dangerouslyUseHTMLString: true,
              message: res.msg,
              duration: 0
            });
        }

      })
    },
    addWorkList() {
      this.contentList.push({
        content: '',
        workType: '',
        workItem: '',
        scaleGrade: '',
        groundType: '0',
        price: '',
        unit: '',
        workload: '',
        coefficient: 1,
        settle: 0,
        workSelect: {
          // 项目列表
          projectList: [],
          // 工作类别列表
          workTypeList: [],
          // 工作项目
          workItemList: [],
          // 项目细项
          subItemList: [],
          // 比例尺
          scaleGradeList: [],
          workTypeLoading: true,
          workItemLoading: true,
          subItemLoading: true,
          scaleGradeLoading: true,
        }
      });
    },
    deletWorkItem(index) {
      let arr = this.contentList;
      if (index >= 0 && index < arr.length) {
        arr.splice(index, 1);
      }
      this.getSettleSum();
    },
    // 数组去重，并格式化为label、value形式
    setArray(arr) {
      if (arr != [] && arr != undefined) {
        let datalist = [...new Set(arr)];
        let list = [];
        for (let i of datalist) {
          let obj = new Object();
          obj.label = i;
          obj.value = i;
          list.push(obj);
        }
        return list;
      } else {
        return [];
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.delete-btn {
  position: absolute;
  left: -30px;
  top: 50%;
  transform: translate(0, -50%);
  color: #F56C6C;
  cursor: pointer;

  i {
    font-size: 25px;
  }
}

table {
  width: 100%;
  /*居中*/
  // margin: 0 auto;
  /*边框*/
  /* border: 1px solid black; */
  text-align: center;
  border-collapse: collapse;
  border: 1px solid #DCDFE6;

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

  .head {
    background-color: #e7f6f3;
    font-family: '微软雅黑';
    font-size: 18;
    font-weight: bold;
  }
}
</style>