cmc-oa/oa-ui/src/views/oa/budget/components/chooseMoney.vue

<template>
  <div>
    <el-form>
      <el-form-item label="项目概况：">
        <table border="1">
          <tr>
            <td style="width: 250px">工作内容</td>
            <td>等级或比例尺</td>
            <td>单位</td>
            <td>工作量</td>
            <td style="width: 100px">要求完成时间</td>
            <td>备注</td>
          </tr>
          <tr v-for="(work, index) in workList" :key="index">
            <td>
              {{ work.content }}
            </td>
            <td>
              {{ work.scale }}
            </td>
            <td>
              {{ work.unit }}
            </td>
            <td>
              {{ work.workLoad }}
            </td>
            <td>
              {{ work.deadline }}
            </td>
            <td>
              {{ work.remark }}
            </td>
          </tr>
        </table>
      </el-form-item>
      <el-form-item label="预结算：">
        <table border="1">
          <tr>
            <td style="width: 100px">工作内容</td>
            <td>工作类别</td>
            <td>工作项目</td>
            <!-- <td>项目细项</td> -->
            <td>比例尺</td>
            <td>地类类型</td>
            <td style="width:90px;">单价</td>
            <td style="width:90px;">总工作量</td>
            <td style="width:70px;">系数</td>
            <td>总额</td>
          </tr>
          <tr v-for="(work, index) in workList" :key="index">
            <td>
              {{ work.content }}
            </td>
            <td>
              <el-select v-model="work.workType" :style="{ width: '100%' }" :loading="work.workSelect.workTypeLoading"
                @change="getWorkItemList(work, work.workType)">
                <el-option v-for="item in work.workSelect.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 work.workSelect.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%' }"
                @change="getUnitPrice(work, work.workItem, work.subItem, work.scaleGrade, work.groundType)">
                <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="一般地类">
                </el-option>
                <el-option key="复杂地类" label="复杂地类" value="复杂地类">
                </el-option>
              </el-select>
            </td>
            <td>
              {{ work.price }} / {{ work.unit }}
            </td>
            <td>
              {{ work.workLoad }}
            </td>
            <td>
              <el-input v-model="work.coefficient" placeholder="请输入系数" @blur="getTotal(work)"></el-input>
            </td>
            <td class="workTotal">
              {{ work.total }}
            </td>
          </tr>
        </table>
        <div style="color:red">tips:预结算表中的系数为：困难系统和调整系数相乘的值（1分制）。例如：困难系数1，调整系数0.8，最终系数为0.8</div>
      </el-form-item>
      <el-form-item label="预结算合计：">
        {{ settle }}<el-button @click="getSettle()" type="success" style="margin-left:30px;">计算</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getWorkTypeList, getWorkItemList, getSubItemList, getScaleGradeList, getUnitPrice } from '@/api/oa/price/price'
import { deepClone } from '@/utils'
export default {
  props: {
    workList: {
      type: Array,
      require: true
    }
  },
  data() {
    return {
      // 工作选项
      workSelect: {
        // 项目列表
        projectList: [],
        // 工作类别列表
        workTypeList: [],
        // 工作项目
        workItemList: [],
        // 项目细项
        subItemList: [],
        // 比例尺
        scaleGradeList: [],
        workTypeLoading: true,
        workItemLoading: true,
        subItemLoading: true,
        scaleGradeLoading: true,
      },
      settle: 0
    }
  },
  created() {
    for (let work of this.workList) {
      this.setValue(work, 'workSelect', deepClone(this.workSelect));
      this.getWorkTypeList(work);
    }
  },
  methods: {
    /* 获取工作类别 */
    getWorkTypeList(work) {
      getWorkTypeList().then(res => {
        if (res) {
          this.setValue(work.workSelect, 'workTypeList', this.setArray(res));
          this.setValue(work.workSelect, 'workTypeLoading', false);
        }
      });
    },
    /* 获取工作项目 */
    getWorkItemList(work, workType) {
      getWorkItemList({ workType: workType }).then(res => {
        if (res) {
          let workItemList = this.setArray(res);
          work.workSelect.workItemLoading = false;
          work.workSelect.workItemList = workItemList;
          work.workItem = workItemList[0].label;
          // this.getSubItemList(work, work.workItem);
          work.subItem = '';
          this.getScaleGradeList(work, work.workItem);
        }
      })
    },
    /* 获取项目细项 */
    getSubItemList(work, workItem) {
      getSubItemList({ workItem }).then(res => {
        if (res) {
          let subItemList = this.setArray(res);
          work.workSelect.subItemLoading = false;
          work.workSelect.subItemList = subItemList;
          work.subItem = subItemList[0].label;
          if (work.scaleGrade == undefined) {
            this.setValue(work, 'scaleGrade', '无');
          }
          if (work.groundType == undefined) {
            this.setValue(work, 'groundType', '一般地类');
          }
          this.getUnitPrice(work, work.workItem, work.subItem, work.scaleGrade, work.groundType);
        }
      })
    },
    /* 获取比例尺 */
    getScaleGradeList(work, workItem) {
      getScaleGradeList({ workItem }).then(res => {
        if (res) {
          let scaleGradeList = this.setArray(res);
          work.workSelect.scaleGradeLoading = false;
          work.workSelect.scaleGradeList = scaleGradeList;
          this.setValue(work, 'scaleGrade', scaleGradeList[0].label)
          // work.scaleGrade = scaleGradeList[0].label;
          if (work.scaleGrade == undefined) {
            this.setValue(work, 'scaleGrade', '无');
          }
          if (work.groundType == undefined) {
            this.setValue(work, 'groundType', '一般地类');
          }
          this.getUnitPrice(work, work.workItem, work.subItem, work.scaleGrade, work.groundType);
        }
      })
    },
    /* 获取单价 */
    getUnitPrice(work, workItem, subItem, scaleGrade, groundType) {
      getUnitPrice({ workItem, subItem, scaleGrade, priceType: groundType }).then(res => {
        if (res.length != 0) {
          work.priceId = res.data.id;
          this.setValue(work, 'price', res.data.price)
          this.setValue(work, 'coefficient', 1)
          if (work.workLoad != undefined || work.workLoad != '') {
            this.getTotal(work);
          }
        }
      })
    },
    /* 获取总额 */
    getTotal(work) {
      let total = this.calculateTotal(work.price, work.coefficient, work.workLoad, 1);
      this.setValue(work, 'total', total)
    },
    /* 计算总额 */
    calculateTotal(price, coefficient, workLoad, percent) {
      return ((parseFloat(price) * parseFloat(coefficient) * parseFloat(workLoad)) * percent).toFixed(2);
    },
    getSettle() {
      const elements = document.querySelectorAll(".workTotal");
      let sum = 0;
      if (elements.length > 0) {
        for (let e of elements) {
          sum = sum + Number(e.innerHTML);
        }
        this.settle = sum.toFixed(2)
      }
      let obj = {}
      obj.workList = this.workList;
      obj.settle = this.settle;
      console.log(this.workList);
      this.$emit('getSettle',obj)
    },
    //数组去重
    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 [];
      }
    },
    setValue(key, name, val) {
      this.$set(key, name, val)
    }
  }
}
</script>

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

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