bonus-ui/src/views/materialsStation/cost/component/applyHome.vue

<template>
  <div class="app-container" id="costApplyList">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px">
      <el-form-item>
        <treeselect
          ref="treeselectRef"
          v-model="unitIds"
          :options="unitList"
          :normalizer="normalizer"
          :show-count="true"
          style="width: 300px"
          :disable-branch-nodes="true"
          noChildrenText="没有数据了"
          noOptionsText="没有数据"
          noResultsText="没有搜索结果"
          placeholder="请选择结算班组"
          @select="unitChange"
          :multiple="true"
        ></treeselect>
      </el-form-item>
      <el-form-item prop="projectIds">
        <treeselect
          v-model="queryParams.projectId"
          :options="proList"
          :normalizer="normalizer"
          :show-count="true"
          style="width: 240px"
          :disable-branch-nodes="true"
          noChildrenText="没有数据了"
          noOptionsText="没有数据"
          noResultsText="没有搜索结果"
          placeholder="请选择结算工程"
          @select="proChange"
          :disabled="unitIds.length == 0"
        />
      </el-form-item>
      <el-form-item prop="agreementCode">
        <el-tooltip content="协议编号" placement="top" :disabled="!queryParams.agreementCode">
          <template #content>
            {{ queryParams.agreementCode }}
          </template>
          <el-input v-model="queryParams.agreementCode" placeholder="请输入协议号" clearable disabled />
        </el-tooltip>
      </el-form-item>
      <el-form-item prop="sltStatus">
        <el-select v-model="queryParams.sltStatus" placeholder="请选择结算状态" clearable filterable>
          <el-option
            v-for="dict in dict.type.cost_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button type="primary" plain size="mini" @click="handleApplyList">批量结算</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="tableList" @selection-change="handleSelectionChange" :max-height="650">
      <el-table-column
        type="selection"
        width="55"
        align="center"
        :selectable="row => row.sltStatus == 0 || row.sltStatus == 3"
      />
      <el-table-column label="序号" align="center" width="80" type="index">
        <template slot-scope="scope">
          <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="协议号" align="center" prop="agreementCode" :show-overflow-tooltip="true" />
      <el-table-column label="结算班组" align="center" prop="unitName" width="200" />
      <el-table-column label="结算工程" align="center" prop="projectName" width="200" />
      <el-table-column label="合计费用（元）" align="center" prop="costs" :show-overflow-tooltip="true">
        <template slot-scope="scope" v-if="scope.row.costs != null && scope.row.costs != ''">
          {{ scope.row.costs.toFixed(2) }}
        </template>
      </el-table-column>
      <el-table-column label="结算状态" align="center" prop="sltStatus" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.cost_status" :value="scope.row.sltStatus" />
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
      <el-table-column label="操作" align="center" width="300" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-edit"
            @click="handleApply(scope.row)"
            v-if="scope.row.sltStatus == '0' || scope.row.sltStatus == '3'"
          >
            结算申请
          </el-button>

          <el-button type="primary" plain size="mini" @click="openPrintDialog(scope.row)">协议书</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 协议单弹窗 -->
    <el-dialog :visible.sync="openPrint" width="1100px" append-to-body>
      <div id="checkId">
        <div style="height: 600px; overflow-y: scroll">
          <vue-easy-print tableShow ref="remarksPrintRef" class="print">
            <div style="text-align: center; font-weight: 600; font-size: 16px">机具设备有偿使用费结算协议书</div>
            <div class="info" style="margin-top: 10px; display: flex; flex-wrap: wrap">
              <div class="item" style="width: 65%; flex-shrink: 0; margin-bottom: 5px; font-size: 14px"></div>
              <div class="item" style="width: 35%; flex-shrink: 0; margin-bottom: 5px; font-size: 14px">
                <span>协议号：{{ agreementContent.agreementCode }}</span>
              </div>
            </div>
            <div class="tabelColumn">
              <div class="columnLabel" style="width: 20%">工程名称：</div>
              <div class="columnContent" style="width: 80%">{{ agreementContent.projectName }}</div>
            </div>
            <div class="tabelColumn">
              <div class="columnLabel" style="width: 20%">承租单位：</div>
              <div class="columnContent" style="width: 40%">{{ agreementContent.unitName }}</div>
              <div class="columnLabel" style="width: 10%; border-left: 1px solid #9c9c9c">日期：</div>
              <div class="columnContent" style="width: 30%">{{ agreementContent.applyTime || newData }}</div>
            </div>
            <div class="tabelColumn">
              <div class="columnLabel" style="width: 100%">结算项目及金额(元)</div>
            </div>
            <div class="tabelColumn">
              <div class="columnLabel" style="width: 60%">一、施工机具有偿使用费：</div>
              <div class="columnContent" style="width: 40%">￥ {{ agreementContent.leaseCost }}</div>
            </div>
            <div class="tabelColumn">
              <div class="columnLabel" style="width: 60%">二、施工机具维修费：</div>
              <div class="columnContent" style="width: 40%">￥ {{ agreementContent.repairCost }}</div>
            </div>
            <div class="tabelColumn">
              <div class="columnLabel" style="width: 60%">三、施工机具丢失费：</div>
              <div class="columnContent" style="width: 40%">￥ {{ agreementContent.loseCost }}</div>
            </div>
            <div class="tabelColumn">
              <div class="columnLabel" style="width: 60%">四、施工机具损坏赔偿费：</div>
              <div class="columnContent" style="width: 40%">￥ {{ agreementContent.scrapCost }}</div>
            </div>
            <div class="tabelColumn">
              <div class="columnLabel" style="width: 60%">五、施工机具租赁减免费：</div>
              <div class="columnContent" style="width: 40%">￥ {{ agreementContent.reductionCost }}</div>
            </div>
            <div class="tabelColumn">
              <div class="columnLabel" style="width: 20%">费用合计金额（大写）：</div>
              <div class="columnContent" style="width: 40%">{{ agreementContent.costAllUpper }}</div>
              <div class="columnContent" style="width: 40%">￥ {{ agreementContent.costAll }}</div>
            </div>
            <div class="tabelColumn" style="border: 1px solid #9c9c9c;">
              <div class="columnLabel" style="width: 20%">说明：</div>
              <div class="columnContent" style="width: 80%">本协议一式三份，甲方一份，乙方一份，经双方签字后生效。</div>
            </div>

            <div class="fillIn" style="margin-top: 20px; display: flex; justify-content: space-between">
              <div class="item" style="width: 33%">
                <div>
                  <span>部门负责人：</span>
                </div>
              </div>

              <div class="item" style="width: 33%">
                <div>
                  <span>承租负责人：</span>
                </div>
              </div>

              <div class="item" style="width: 33%">
                <div>
                  <span>核算员：</span>
                </div>
              </div>
            </div>
          </vue-easy-print>
        </div>
      </div>

      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="primary" @click="print">打 印</el-button>
        <el-button @click="openPrint = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getUnitList } from '@/api/back/index.js'
import { getTeamList } from '@/api/materialsStation/auth.js'
import { getSltAgreementInfo, getClzSltAgreementInfo, getProjectListByUnitIds, getClzProjectListByUnitIds, getAgreementInfoById, getClzAgreementInfoById, getSltInfo } from '@/api/cost/cost'
import { toChineseAmount } from '@/utils/bonus.js'
import vueEasyPrint from 'vue-easy-print'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import printJS from 'print-js'
export default {
  name: 'CostApplyList',
  dicts: ['cost_status'],
  components: { Treeselect, vueEasyPrint },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 单位数据
      unitList: [],
      // 工程数据
      proList: [],
      unitIds: [],
      projectIds: null,
      selectTreeProps: {
        children: 'children',
        label: 'name',
        value: 'id',
        multiple: true //false
      },

      // 表格数据
      tableList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        sltStatus: '',
        isCommit: '',
        unitId: null,
        projectId: null,
        agreementId: [],
        agreementCode: ''
      },
      openPrint: false,
      // 协议书内容
      agreementContent: {
        agreementCode: '',
        projectName: '',
        unitName: '',
        leaseCost: '', // 租赁费用
        repairCost: '', // 维修费用
        loseCost: '', // 丢失费用
        scrapCost: '', // 报废费用
        reductionCost: '', // 减免费用
        costAll: '', // 合计费用
        costAllUpper: '' // 合计费用大写
      },
      newData: new Date().toISOString().split('T')[0]
    }
  },
  created() {
    this.GetUnitData()
    // this.GetProData()
    this.getList()
  },
  methods: {
    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children
      }
    },
    // 获取来往单位数据，只获取班组
    async GetUnitData() {
      const params = {
        // projectId: this.queryParams.projectId /*  */,
      }
      const res = await getTeamList(params)
      this.unitList = res.data
      if (this.queryParams.projectId) {
        this.getAgreementInfo()
      }
    },
    unitChange(val) {
      console.log('Selected values:', val) // 检查选中的值
      console.log('xxxxxxxxx', this.queryParams.unitId)
      console.log('yyyyyyyyy', this.unitIds)
      // this.GetProData()
      setTimeout(() => {
        this.queryParams.projectId = null
        this.queryParams.agreementId = null
        this.queryParams.agreementCode = null
        this.GetProData()
      }, 500)
    },
    // 获取 工程名称 列表数据
    async GetProData() {
      const unitIdsAsNumbers = this.unitIds.map(id => Number(id))
      const params = {
        unitIds: unitIdsAsNumbers
      }
      const res = await getClzProjectListByUnitIds(params)
      this.proList = res.data

      this.getAgreementInfo()
    },
    proChange(val) {
      setTimeout(() => {
        this.GetUnitData()
      }, 500)
    },
    // 获取 协议id
    async getAgreementInfo() {
      if (this.unitIds && this.unitIds.length > 0 && this.queryParams.projectId) {
        const params = {
          unitIds: this.unitIds,
          projectId: this.queryParams.projectId
        }
        const res = await getClzAgreementInfoById(params)
        console.log(res)
        if (!res.data && res.data.some(item => !item.agreementId)) {
          this.$message.error('当前单位和工程无协议！')
          this.queryParams.unitId = null
          this.queryParams.projectId = null
          this.GetUnitData()
          this.GetProData()
        } else {
          this.queryParams.agreementId = res.data.map(item => item.agreementId)
          this.queryParams.agreementCode = res.data.map(item => item.agreementCode).join(',')
        }
      }
    },
    /** 查询列表 */
    getList() {
      this.loading = true
      const params = {
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        projectId: this.queryParams.projectId,
        sltStatus: this.queryParams.sltStatus,
        // ...this.queryParams,
        unitIds: this.unitIds
      }
      getClzSltAgreementInfo(params).then(response => {
        this.tableList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.unitIds = []
      this.projectIds = []
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        sltStatus: '',
        isCommit: '',
        unitId: null,
        projectId: null,
        agreementId: [],
        agreementCode: ''
      }
      this.resetForm('queryForm')
      this.handleQuery()
    },
    //结算申请
    handleApply(row) {
      let arr = []
      arr.push(row)
      this.$emit('goDetail', JSON.stringify(arr))
    },
    handleApplyList() {
      if (this.ids.length < 1) {
        this.$message.error('请勾选需要结算的数据！')
        return
      }
      if (this.ids.length > 0) {
        let arr = this.ids
        this.$emit('goDetail', JSON.stringify(arr))
      }
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    async openPrintDialog(row) {
      this.openPrint = true
      try {
        const res = await getSltInfo([row])
        console.log('🚀 ~ openPrintDialog ~ res:', res)
        if (!res.data) return
        this.agreementContent = res.data
        this.agreementContent.agreementCode = row.agreementCode
        this.agreementContent.costAll =
          Number(res.data.leaseCost) +
          Number(res.data.repairCost) +
          Number(res.data.scrapCost) +
          Number(res.data.loseCost) -
          Number(res.data.reductionCost)
        // costAllUpper 中文大写
        this.agreementContent.costAllUpper = toChineseAmount(this.agreementContent.costAll.toFixed(2))
      } catch (error) {
        console.log('🚀 ~ openPrintDialog ~ error:', error)
      }
    },
    //维修任务单打印
    print() {
      this.$refs.remarksPrintRef.print()
      //   printJS({
      //     printable: 'checkId',
      //     type: 'html',
      //     targetStyles: ['*'],
      //     maxWidth:'1400'
      //     // 其他配置选项
      //   });
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep.el-table .fixed-width .el-button--mini {
  width: 80px !important;
  margin-bottom: 10px;
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.tabelColumn {
  width: 1000px;
  height: 50px;
  display: flex;
  align-items: center;
  border: 1px solid #9c9c9c;
  // margin-bottom: 1px;
  border-bottom: none;
}
.columnLabel {
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-left: none;
}
.columnContent {
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-left: 1px solid #9c9c9c;
}
</style>