|
|
@@ -1,10 +1,509 @@
|
|
|
<template>
|
|
|
+ <hc-page-split :options="splitOptions">
|
|
|
+ <template #left>
|
|
|
+ <hc-card title="系统中期支付列表">
|
|
|
+ <template #extra>
|
|
|
+ <el-button hc-btn type="primary" @click="addClick"
|
|
|
+ >添加中期支付项</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ <hc-table
|
|
|
+ :column="tableColumn"
|
|
|
+ :datas="tableData"
|
|
|
+ :loading="tableLoading"
|
|
|
+ :index-style="{ width: 60 }"
|
|
|
+ :is-current-row="true"
|
|
|
+ @row-click="viewRowClick"
|
|
|
+ >
|
|
|
+ <template #payType="{ row }">
|
|
|
+ <span>{{
|
|
|
+ getDictionaryName(mpTypeData, row.payType)
|
|
|
+ }}</span>
|
|
|
+ </template>
|
|
|
+ <template #isDeduct="{ row }">
|
|
|
+ <span>{{ row.isDeduct == 1 ? "是" : "否" }}</span>
|
|
|
+ </template>
|
|
|
+ <template #payApplicableType="{ row }">
|
|
|
+ <span>{{
|
|
|
+ getDictionaryName(
|
|
|
+ palTypeData,
|
|
|
+ row.payApplicableType
|
|
|
+ )
|
|
|
+ }}</span></template
|
|
|
+ >
|
|
|
+ <template #action="{ row }">
|
|
|
+ <el-link type="warning" @click="editRowClick(row)"
|
|
|
+ >修改</el-link
|
|
|
+ >
|
|
|
+
|
|
|
+ <el-link type="danger" @click="delRowClick(row)"
|
|
|
+ >删除</el-link
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </hc-table>
|
|
|
+ <template #action>
|
|
|
+ <hc-pages :pages="searchForm" @change="pageChange" />
|
|
|
+ </template>
|
|
|
+ </hc-card>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <hc-card scrollbar title="详情信息">
|
|
|
+ <infoTable :ids="rowViewId" />
|
|
|
+
|
|
|
+ <hc-card-item itle="汇总项">
|
|
|
+ <template #extra>
|
|
|
+ <el-link type="primary" @click="addColloect"
|
|
|
+ >添加汇总项</el-link
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <hc-table
|
|
|
+ :column="tableColumn1"
|
|
|
+ :datas="tableData1"
|
|
|
+ is-new
|
|
|
+ :index-style="{ width: 60 }"
|
|
|
+ >
|
|
|
+ <template #isDeduct="{ row }">
|
|
|
+ <span>{{ row?.isDeduct === 1 ? "是" : "否" }}</span>
|
|
|
+ </template>
|
|
|
+ <template #action="{ row }">
|
|
|
+ <el-link type="danger" @click="delCollectRow(row)"
|
|
|
+ >删除</el-link
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </hc-table>
|
|
|
+ </hc-card-item>
|
|
|
+ </hc-card>
|
|
|
+
|
|
|
+ <!-- 新增/修改 -->
|
|
|
+ <hc-dialog
|
|
|
+ v-model="isDialogShow"
|
|
|
+ is-footer-center
|
|
|
+ :title="formModel.id ? '新增' : '修改'"
|
|
|
+ @close="dialogClose"
|
|
|
+ >
|
|
|
+ <el-form
|
|
|
+ ref="formRef"
|
|
|
+ :model="formModel"
|
|
|
+ :rules="formRules"
|
|
|
+ size="large"
|
|
|
+ label-width="auto"
|
|
|
+ >
|
|
|
+ <el-form-item label="支付项编号">
|
|
|
+ <el-input
|
|
|
+ v-model="formModel.payNumber"
|
|
|
+ clearable
|
|
|
+ placeholder="请输入支付项编号"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="支付项名称：" prop="payName">
|
|
|
+ <el-input
|
|
|
+ v-model="formModel.payName"
|
|
|
+ clearable
|
|
|
+ placeholder="请输入支付项名称"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="支付项类型：" prop="payType">
|
|
|
+ <el-select
|
|
|
+ v-model="formModel.payType"
|
|
|
+ filterable
|
|
|
+ clearable
|
|
|
+ block
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in mpTypeData"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="合同计算公式名称:" prop="key11">
|
|
|
+ <el-input
|
|
|
+ v-model="formModel.key11"
|
|
|
+ clearable
|
|
|
+ placeholder="请输入合同计算公式名称"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="变更计算公式名称:" prop="key12">
|
|
|
+ <el-input
|
|
|
+ v-model="formModel.key11"
|
|
|
+ clearable
|
|
|
+ placeholder="请输入变更计算公式名称"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="本期计算公式名称:" prop="key13">
|
|
|
+ <el-input
|
|
|
+ v-model="formModel.key11"
|
|
|
+ clearable
|
|
|
+ placeholder="请输入本期计算公式名称"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="是否为扣款项:" prop="isDeduct">
|
|
|
+ <el-select
|
|
|
+ v-model="formModel.status"
|
|
|
+ block
|
|
|
+ placeholder="是否否为扣款项"
|
|
|
+ >
|
|
|
+ <el-option label="是" :value="1" />
|
|
|
+ <el-option label="否" :value="0" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="是否加粗:" prop="isBoldText">
|
|
|
+ <el-select
|
|
|
+ v-model="formModel.isBoldText"
|
|
|
+ block
|
|
|
+ placeholder="是否加粗"
|
|
|
+ >
|
|
|
+ <el-option label="是" :value="1" />
|
|
|
+ <el-option label="否" :value="0" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="是否手动输入:" prop="isManualInput">
|
|
|
+ <el-select
|
|
|
+ v-model="formModel.isManualInput"
|
|
|
+ block
|
|
|
+ placeholder="是否手动输入"
|
|
|
+ >
|
|
|
+ <el-option label="是" :value="1" />
|
|
|
+ <el-option label="否" :value="0" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="是否显示百分比:" prop="isShowPercent">
|
|
|
+ <el-select
|
|
|
+ v-model="formModel.isShowPercent"
|
|
|
+ block
|
|
|
+ placeholder="是否显示百分比"
|
|
|
+ >
|
|
|
+ <el-option label="是" :value="1" />
|
|
|
+ <el-option label="否" :value="0" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="是否合计项:" prop="isTotalTerms">
|
|
|
+ <el-select
|
|
|
+ v-model="formModel.isTotalTerms"
|
|
|
+ block
|
|
|
+ placeholder="是否合计项"
|
|
|
+ >
|
|
|
+ <el-option label="是" :value="1" />
|
|
|
+ <el-option label="否" :value="0" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="支付适用类型：" prop="payApplicableType">
|
|
|
+ <el-select
|
|
|
+ v-model="formModel.payApplicableType"
|
|
|
+ filterable
|
|
|
+ clearable
|
|
|
+ block
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in palTypeData"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="排序号：" prop="sort">
|
|
|
+ <el-input
|
|
|
+ v-model="formModel.sort"
|
|
|
+ clearable
|
|
|
+ placeholder="请输入排序号："
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="排序号：" prop="remarks">
|
|
|
+ <el-input
|
|
|
+ v-model="formModel.remarks"
|
|
|
+ clearable
|
|
|
+ placeholder="请输入备注"
|
|
|
+ type="textarea"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <el-button hc-btn @click="dialogClose">取消</el-button>
|
|
|
+ <el-button
|
|
|
+ hc-btn
|
|
|
+ type="primary"
|
|
|
+ :loading="submitLoading"
|
|
|
+ @click="dialogSubmit"
|
|
|
+ >提交</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </hc-dialog>
|
|
|
+
|
|
|
+ <!-- 添加汇总项 -->
|
|
|
+ <hc-dialog
|
|
|
+ v-model="isCollectShow"
|
|
|
+ is-table
|
|
|
+ widths="1200px"
|
|
|
+ title="添加汇总项"
|
|
|
+ @save="collectModalSave"
|
|
|
+ >
|
|
|
+ <div class="hc-flex-column">
|
|
|
+ <div class="hc-flex-shrink hc-alert-primary">
|
|
|
+ <span class="mr-1">当前表格已选择</span>
|
|
|
+ <span class="text-4">{{ selectArr.length }}</span>
|
|
|
+ <span class="ml-1">项</span>
|
|
|
+ </div>
|
|
|
+ <div class="hc-flex-content">
|
|
|
+ <hc-body padding="0px">
|
|
|
+ <hc-table
|
|
|
+ :column="tableCollectColumn"
|
|
|
+ :datas="tableCollectData"
|
|
|
+ :loading="tableCollectLoading"
|
|
|
+ is-new
|
|
|
+ :check-style="{ width: 29 }"
|
|
|
+ :index-style="{ width: 60 }"
|
|
|
+ is-check
|
|
|
+ @selection-change="tableCollectCheckChange"
|
|
|
+ >
|
|
|
+ <template #isDeduct="{ row }">
|
|
|
+ <span>{{
|
|
|
+ row?.isDeduct === 1 ? "是" : "否"
|
|
|
+ }}</span>
|
|
|
+ </template>
|
|
|
+ <template #isTotalTerms="{ row }">
|
|
|
+ <span>{{
|
|
|
+ row?.isTotalTerms === 1 ? "是" : "否"
|
|
|
+ }}</span>
|
|
|
+ </template>
|
|
|
+ </hc-table>
|
|
|
+ </hc-body>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </hc-dialog>
|
|
|
+ </hc-page-split>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
+import { nextTick, onActivated, onDeactivated, onUnmounted, ref } from "vue";
|
|
|
+import { deepClone, formValidate, getArrValue, getObjValue } from "js-fast-way";
|
|
|
+import infoTable from "./info-table.vue";
|
|
|
+import { HcDelMsg } from "hc-vue3-ui";
|
|
|
+import mainApi from "~api/desk/interim-pay";
|
|
|
+import { getDictionaryData, getDictionaryName } from "~uti/tools";
|
|
|
+import { arrToId } from "js-fast-way";
|
|
|
+//页面分割
|
|
|
+const splitOptions = { sizes: [50, 50], snapOffset: 0, minSize: [300, 300] };
|
|
|
|
|
|
-</script>
|
|
|
+//激活
|
|
|
+onActivated(() => {
|
|
|
+ searchForm.value.current = 1;
|
|
|
+ getTableData();
|
|
|
+ getMpTypeData();
|
|
|
+ getPalTypeData();
|
|
|
+});
|
|
|
+
|
|
|
+//搜索表单
|
|
|
+const searchForm = ref({ current: 1, size: 30, total: 0 });
|
|
|
+
|
|
|
+//分页
|
|
|
+const pageChange = ({ current, size }) => {
|
|
|
+ searchForm.value.current = current;
|
|
|
+ searchForm.value.size = size;
|
|
|
+ getTableData();
|
|
|
+};
|
|
|
|
|
|
-<style scoped lang="scss">
|
|
|
+//表格数据
|
|
|
+const tableColumn = ref([
|
|
|
+ { key: "payNumber", name: "支付项编号" },
|
|
|
+ { key: "payName", name: "支付项名称" },
|
|
|
+ { key: "payType", name: "支付项类型" },
|
|
|
+ { key: "isDeduct", name: "是否为扣款项" },
|
|
|
+ { key: "payApplicableType", name: "支付适用类型" },
|
|
|
+ { key: "action", name: "操作", width: 100, align: "center" },
|
|
|
+]);
|
|
|
+
|
|
|
+//获取表格数据
|
|
|
+const tableLoading = ref(true);
|
|
|
+const tableData = ref([{}]);
|
|
|
+const getTableData = async () => {
|
|
|
+ tableData.value = [];
|
|
|
+ tableLoading.value = true;
|
|
|
+ const { data } = await mainApi.page({
|
|
|
+ ...searchForm.value,
|
|
|
+ total: null,
|
|
|
+ });
|
|
|
+ tableLoading.value = false;
|
|
|
+ tableData.value = getArrValue(data?.records);
|
|
|
+ searchForm.value.total = data?.total || 0;
|
|
|
+ if (tableData.value.length > 0) {
|
|
|
+ getDetail(tableData.value[0].id);
|
|
|
+ rowViewId.value = tableData.value[0].id;
|
|
|
+ }
|
|
|
+};
|
|
|
+//支付项类型
|
|
|
+const mpTypeData = ref([]);
|
|
|
+const getMpTypeData = async () => {
|
|
|
+ mpTypeData.value = await getDictionaryData("meter_pay_type", false);
|
|
|
+};
|
|
|
+//支付适用类型
|
|
|
+
|
|
|
+const palTypeData = ref([]);
|
|
|
+const getPalTypeData = async () => {
|
|
|
+ palTypeData.value = await getDictionaryData(
|
|
|
+ "meter_pay_applicable_type",
|
|
|
+ false
|
|
|
+ );
|
|
|
+};
|
|
|
+const rowViewId = ref("");
|
|
|
+const viewRowClick = ({ row }) => {
|
|
|
+ rowViewId.value = row.id;
|
|
|
+ getDetail(row.id);
|
|
|
+};
|
|
|
+const tableData1 = ref([]);
|
|
|
+//汇总项
|
|
|
+const tableColumn1 = ref([
|
|
|
+ { key: "payNumber", name: "支付项编号" },
|
|
|
+ { key: "payName", name: "支付项名称" },
|
|
|
+ { key: "payTypeName", name: "支付项类型" },
|
|
|
+ { key: "contractFormulaIds", name: "合同计算公式" },
|
|
|
+ { key: "updateFormulaIds", name: "变更计算公式" },
|
|
|
+ { key: "currentFormulaIds", name: "本期计算公式" },
|
|
|
+ { key: "isDeduct", name: "是否为扣款项" },
|
|
|
+ { key: "action", name: "操作", width: 50 },
|
|
|
+]);
|
|
|
+//获取节点详情
|
|
|
+const getDetail = async (id) => {
|
|
|
+ const { error, code, data } = await mainApi.getProDetail({
|
|
|
+ id,
|
|
|
+ });
|
|
|
+ if (!error && code === 200) {
|
|
|
+ tableData1.value = getObjValue(data)["summaryItemList"];
|
|
|
+ } else {
|
|
|
+ tableData1.value = [];
|
|
|
+ }
|
|
|
+};
|
|
|
+//新增/修改 弹窗
|
|
|
+const isDialogShow = ref(false);
|
|
|
+const formRef = ref(null);
|
|
|
+const formModel = ref({});
|
|
|
+const formRules = {
|
|
|
+ payName: { required: true, trigger: "blur", message: "请输入支付项名称" },
|
|
|
+ payType: { required: true, trigger: "blur", message: "请选择支付项编号" },
|
|
|
+};
|
|
|
+
|
|
|
+//新增
|
|
|
+const addClick = async () => {
|
|
|
+ formModel.value = {};
|
|
|
+ await nextTick();
|
|
|
+ isDialogShow.value = true;
|
|
|
+};
|
|
|
+
|
|
|
+//修改
|
|
|
+const editRowClick = async (row) => {
|
|
|
+ formModel.value = deepClone(row);
|
|
|
+ await nextTick();
|
|
|
+ isDialogShow.value = true;
|
|
|
+};
|
|
|
+
|
|
|
+//提交表单
|
|
|
+const submitLoading = ref(false);
|
|
|
+const dialogSubmit = async () => {
|
|
|
+ const isForm = await formValidate(formRef.value);
|
|
|
+ if (!isForm) return false;
|
|
|
+ submitLoading.value = true;
|
|
|
+ const { error, code } = await mainApi.submit(formModel.value);
|
|
|
+ submitLoading.value = false;
|
|
|
+ if (!error && code === 200) {
|
|
|
+ window?.$message?.success("操作成功");
|
|
|
+ dialogClose();
|
|
|
+ getTableData().then();
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+//删除
|
|
|
+const delRowClick = (row) => {
|
|
|
+ HcDelMsg(async (resolve) => {
|
|
|
+ const { code } = await mainApi.del(row.id);
|
|
|
+ resolve(); //关闭弹窗的回调
|
|
|
+ if (code !== 200) return;
|
|
|
+ window.$message.success("删除成功");
|
|
|
+ getTableData().then();
|
|
|
+ rowViewId.value = "";
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+//关闭弹窗
|
|
|
+const dialogClose = () => {
|
|
|
+ isDialogShow.value = false;
|
|
|
+ formModel.value = {};
|
|
|
+};
|
|
|
+
|
|
|
+//添加汇总项
|
|
|
+const isCollectShow = ref(false);
|
|
|
+const collectSaveLoading = ref(false);
|
|
|
+const collectModalSave = async () => {
|
|
|
+ collectSaveLoading.value = true;
|
|
|
+ const { error, code, msg } = await mainApi.addCollect({
|
|
|
+ bindIds: selectTableCollectIds.value,
|
|
|
+ id: rowViewId.value,
|
|
|
+ });
|
|
|
+ //判断状态
|
|
|
+ collectSaveLoading.value = false;
|
|
|
+ if (!error && code === 200) {
|
|
|
+ window?.$message?.success(msg);
|
|
|
+ } else {
|
|
|
+ window.$message.error(msg);
|
|
|
+ }
|
|
|
+ getDetail(rowViewId.value);
|
|
|
+ isCollectShow.value = false;
|
|
|
+};
|
|
|
+const addColloect = () => {
|
|
|
+ isCollectShow.value = true;
|
|
|
+ getTableCollectData();
|
|
|
+ selectArr.value = [];
|
|
|
+};
|
|
|
+//删除汇总项
|
|
|
+const delCollectRow = async (row) => {
|
|
|
+ HcDelMsg(async (resolve) => {
|
|
|
+ await removeCollectPay(row.id);
|
|
|
+ resolve(); //关闭弹窗的回调
|
|
|
+ });
|
|
|
+};
|
|
|
+const removeCollectPay = async (id) => {
|
|
|
+ const { error, code, msg } = await mainApi.removeCollect({
|
|
|
+ id: rowViewId.value,
|
|
|
+ bindId: id,
|
|
|
+ });
|
|
|
+ if (!error && code === 200) {
|
|
|
+ window?.$message?.success("删除成功");
|
|
|
+ getDetail(rowViewId.value);
|
|
|
+ } else {
|
|
|
+ window.$message.error(msg);
|
|
|
+ }
|
|
|
+};
|
|
|
+//添加汇总项
|
|
|
+const tableCollectColumn = ref([
|
|
|
+ { key: "payNumber", name: "支付项编号" },
|
|
|
+ { key: "payName", name: "支付项名称" },
|
|
|
+ { key: "payTypeName", name: "支付项类型" },
|
|
|
+ { key: "isDeduct", name: "是否为扣款项" },
|
|
|
+ { key: "isTotalTerms", name: "是否合计项" },
|
|
|
+ { key: "payApplicableTypeName", name: "支付项适用类型" },
|
|
|
+]);
|
|
|
+const tableCollectData = ref([]);
|
|
|
+const tableCollectLoading = ref(false);
|
|
|
+const getTableCollectData = async () => {
|
|
|
+ tableCollectLoading.value = true;
|
|
|
+ const { error, code, data } = await mainApi.getProListPage({
|
|
|
+ projectId: 1,
|
|
|
+ recordId: rowViewId.value,
|
|
|
+ });
|
|
|
+ tableCollectLoading.value = false;
|
|
|
+ if (!error && code === 200) {
|
|
|
+ tableCollectData.value = getArrValue(data);
|
|
|
+ } else {
|
|
|
+ tableCollectData.value = [];
|
|
|
+ }
|
|
|
+};
|
|
|
+const selectTableCollectIds = ref("");
|
|
|
+const selectArr = ref([]);
|
|
|
+const tableCollectCheckChange = (list) => {
|
|
|
+ selectArr.value = list;
|
|
|
+ selectTableCollectIds.value = arrToId(list);
|
|
|
+};
|
|
|
+</script>
|
|
|
|
|
|
-</style>
|
|
|
+<style scoped lang="scss"></style>
|
