gcs-ui-lib 1.0.1

package/packages/AutoFillService/src/components/BudgetAccountDialogForSetting.vue

@@ -0,0 +1,588 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-09-27 22:30:25
+ * @LastEditTime: 2023-12-18 16:06:14
+ * @LastEditors: maoliqiong maoliqiong@nstc.com.cn
+ * @Description: 预算科目-(付款)
+ * @FilePath: \gcs-rec_web\payee-web\payee\src\views\component\BudgetAccountDialog.vue
+-->
+<template>
+  <div>
+    <el-dialog
+      ref="budgetAccountDialog"
+      :class="[{ 'fixed-dialog': true, showplan: showPlan }]"
+      :title="$l('选择预算科目')"
+      :visible="visible"
+      width="1000px"
+      :append-to-body="isChild"
+      @close="close"
+      :close-on-click-modal="false"
+      v-drag
+    >
+      <!-- 查询区域 -->
+      <div class="form-wrap">
+        <ClAdvancedFilter
+          :visible="true"
+          onlyKey="value"
+          filterId="Budgetaccount-payment-filterIdNew"
+          :model="form"
+          :filter-list="filterList"
+          @search="submitForm('searchForm', true)"
+          @enter="submitForm('searchForm', true)"
+          @clear="queryReset"
+        >
+          <template slot="budgetUnitNo">
+            <el-select
+              filterable
+              clearable
+              v-model="form.budgetUnitNo"
+              :placeholder="$l('请选择')"
+              @change="budgetUnitChange()"
+              :ruleField="true"
+              v-rule-key
+              rule-form="ruleValidate"
+              :rules="[
+                {
+                  required: true,
+                  message: $l('请选择') + $l('预算单位'),
+                  trigger: ['change'],
+                },
+              ]"
+            >
+              <el-option
+                :label="item.budgetUnitName"
+                :value="item.budgetUnitNo"
+                v-for="item in budgetUnitNameArr"
+                :key="item.budgetUnitNo"
+              ></el-option>
+            </el-select>
+          </template>
+          <template slot="groupId">
+            <el-select
+              filterable
+              clearable
+              v-model="form.groupId"
+              :placeholder="$l('请选择')"
+              @change="getTermName()"
+              :ruleField="true"
+              v-rule-key
+              rule-form="ruleValidate"
+              :rules="[
+                {
+                  required: true,
+                  message: $l('请选择') + $l('预算系列'),
+                  trigger: ['change'],
+                },
+              ]"
+            >
+              <el-option
+                :label="item.groupName"
+                :value="item.groupId"
+                v-for="item in groupNameArr"
+                :key="item.groupId"
+              ></el-option>
+            </el-select>
+          </template>
+          <template slot="termId">
+            <el-select
+              v-model="form.termId"
+              filterable
+              clearable
+              :placeholder="$l('请选择')"
+              :ruleField="true"
+              v-rule-key
+              rule-form="ruleValidate"
+              :rules="[
+                {
+                  required: true,
+                  message: $l('请选择') + $l('预算期间'),
+                  trigger: ['change'],
+                },
+              ]"
+            >
+              <el-option
+                :label="item.termName"
+                :value="item.termId"
+                v-for="item in termNameArr"
+                :key="item.termId"
+              ></el-option>
+            </el-select>
+          </template>
+        </ClAdvancedFilter>
+      </div>
+      <div class="tables">
+        <!-- @row-click="choseBudget" -->
+        <el-table
+          class="nolast-border"
+          border
+          :data="tableData1"
+          style="width: 100%"
+          max-height="200"
+          :key="size"
+          v-bind="sizeBind"
+          :header-cell-style="{ 'text-align': 'center' }"
+        >
+          <!-- 序号 -->
+          <el-table-column
+            :label="$l('序号')"
+            align="center"
+            type="index"
+            width="62"
+          >
+          </el-table-column>
+          <el-table-column
+            v-for="(column, idx) in columns1"
+            :key="idx"
+            :label="column.label"
+            :min-width="column.width"
+            :align="column.align"
+          >
+            <template slot-scope="scope">
+              {{ scope.row[column.prop] }}
+            </template>
+          </el-table-column>
+          <!-- 操作 -->
+          <el-table-column
+            :label="$l('操作')"
+            width="88"
+            align="center"
+          >
+            <template slot-scope="scope">
+              <el-button type="text" @click="choseBudget(scope.row)">{{
+                $l('选择')
+              }}</el-button>
+            </template>
+          </el-table-column>
+          <CLTableSetSize
+            :size.sync="size"
+            @resize="(el) => (sizeBind = el)"
+          />
+        </el-table>
+        <div class="flex-box flex-r m-t-s">
+          <ClPagination
+            :page-obj="pagination"
+            :page-key="{ no: 'page', size: 'size', total: 'total' }"
+            @change="paginationChange"
+          />
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { randomString } from "@/utils/index";
+import {
+  getUnitBudgetAllPullDown,
+  getBudgetQuota,
+  getQuotaTerm,
+} from "@/api/common.js";
+import { parseTime, amountFormat } from "@/utils/index.js";
+import { Pagination, AdvancedFilter, Page, TableSetSize } from "n20-common-lib";
+export default {
+  name: "Budgetaccount",
+  components: {
+    ClPage: Page,
+    CLTableSetSize:TableSetSize,
+    ClPagination: Pagination,
+    ClAdvancedFilter: AdvancedFilter,
+  },
+  props: {
+    unitNo: {
+      type: String,
+    },
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    isNeedQueryPlan: {
+      //是否需要差资金计划，默认是
+      type: Boolean,
+      default: true,
+    },
+    isChild: {
+      type: Boolean,
+      default: false,
+    },
+    isSetColumns: {
+      type: Boolean,
+      default: false,
+    },
+    businessDate: {
+      type: String,
+      default: '',
+    },
+    currencyNo: {
+      type: String,
+      default: "",
+    },
+    // 关联业务的收支方向
+    rpDir: {
+      type: [Number, String],
+      default: 1,
+    },
+    payTool: {
+      type: String,
+      default: "",
+    },
+  },
+  data(vm) {
+    return {
+      filterList: [
+        {
+          id: randomString(11),
+          label: vm.$l('预算单位'),
+          type: "select",
+          value: "budgetUnitNo",
+          slotName: "budgetUnitNo",
+          options: [],
+          isDefault: true,
+          required: true,
+          // static: true,
+          props: {
+            filterable: true,
+            clearable: true,
+            labelKey: "budgetUnitName",
+            valueKey: "budgetUnitNo",
+          },
+        },
+        {
+          id: randomString(11),
+          label: vm.$l('预算系列'),
+          type: "select",
+          value: "groupId",
+          slotName: "groupId",
+          options: [],
+          isDefault: true,
+          required: true,
+          // static: true,
+          props: {
+            filterable: true,
+            clearable: true,
+            labelKey: "groupName",
+            valueKey: "groupId",
+          },
+        },
+        {
+          id: randomString(11),
+          label: vm.$l('预算科目名称'), //预算科目名称
+          type: "text",
+          value: "budgetAccountNameLike",
+          isDefault: true,
+          // static: true,
+          props: {
+            clearable: true,
+          },
+        },
+      ],
+      size: "small",
+      sizeBind: {},
+      parseTime: parseTime,
+      budgetTypeId: "",
+      form: {
+        budgetUnitNo: "",
+        groupId: "",
+        termId: "",
+        budgetAccountNameLike: "",
+      },
+      budgetUnitNameArr: [], //预算单位
+      groupNameArr: [], //预算系列
+      termNameArr: [], //预算期间
+      budgetAccountData: {}, //预算科目当前选中值
+      amountPlanData: {},
+      pagination: {
+        page: 1,
+        size: 50,
+        total: 0,
+      },
+      rules: {
+        budgetUnitNo: [
+          {
+            required: true,
+            message: vm.$l('请选择预算单位'),
+            trigger: "change",
+          },
+        ],
+        groupId: [
+          {
+            required: true,
+            message: vm.$l('请选择预算系列'),
+            trigger: "change",
+          },
+        ],
+        termId: [
+          {
+            required: true,
+            message: vm.$l('请选择预算期间'),
+            trigger: "change",
+          },
+        ],
+      },
+      columns1: [],
+      tableData1: [],
+      showPlan: false,
+    };
+  },
+  watch: {
+    "form.groupId"(val) {
+      let group = this.groupNameArr?.filter((it) => {
+        return it.groupId == val;
+      });
+      if (!group || group.length == 0) return;
+      let typeId = group && group.length > 0 ? group[0].bussBudgetTypeId : "";
+      this.budgetTypeId = typeId;
+    },
+    "form.budgetUnitNo"(val) {
+      this.budgetUnitChange();
+    },
+    visible(val) {
+      if (val) {
+        this.setColumns();
+        this.tableData1 = [];
+        this.budgetAccountData = {};
+        this.amountPlanData = {};
+        this.showPlan = false;
+        this.getInitData();
+      }
+      if (!val) {
+        this.queryReset();
+        this.clearValid();
+      }
+    },
+  },
+  methods: {
+    setColumns() {
+      // if (this.isSetColumns) {
+        this.columns1 = [
+          {
+            prop: "budgetAccountCode",
+            label: this.$l('预算科目编码'),
+            align: "center",
+            width: 144,
+          },
+          {
+            prop: "budgetAccountName",
+            label: this.$l('预算科目名称'),
+            width: 230,
+          },
+        ];
+      // } else {
+      //   this.columns1 = [
+      //     {
+      //       prop: "budgetAccountCode",
+      //       label: this.$l('预算科目编码'),
+      //       align: "center",
+      //     },
+      //     {
+      //       prop: "budgetAccountName",
+      //       label: this.$l('预算科目名称'),
+      //       width: 180,
+      //     },
+      //     {
+      //       prop: "amount",
+      //       label: this.$l('预算总额'),
+      //       align: "right",
+      //     },
+      //     {
+      //       prop: "balanceAmount",
+      //       label: this.$l('预算剩余额度'),
+      //       align: "right",
+      //     },
+      //   ];
+      // }
+    },
+    paginationChange(pagination) {
+      this.pagination = pagination;
+      this.submitForm("searchForm", false);
+    },
+
+    // 先查预算单位下拉，可得到预算系列
+    async getUnitBudgetAllPullDown() {
+      await getUnitBudgetAllPullDown({ unitNo: this.unitNo }).then((res) => {
+        this.budgetUnitNameArr = res; //预算单位
+        this.filterList.forEach((item) => {
+          if (item.value == "budgetUnitNo") {
+            item.options = this.budgetUnitNameArr;
+          }
+        });
+        if (this.budgetUnitNameArr.length == 1) {
+          this.form.budgetUnitNo = this.budgetUnitNameArr[0].budgetUnitNo;
+          this.groupNameArr = this.budgetUnitNameArr[0].groupList; //预算系列
+          this.filterList.forEach((item) => {
+            if (item.value == "groupId") {
+              item.options = this.groupNameArr;
+            }
+          });
+          if (this.groupNameArr.length == 1) {
+            this.form.groupId = this.groupNameArr[0].groupId;
+            this.budgetTypeId = this.groupNameArr[0].budgetTypeId;
+          }
+        } else {
+          this.form.groupId = "";
+          this.budgetTypeId = "";
+        }
+        this.getTermName();
+      });
+    },
+
+    budgetUnitChange() {
+      this.groupNameArr = this.budgetUnitNameArr.find((it) => {
+        return it.budgetUnitNo == this.form.budgetUnitNo;
+      })?.groupList;
+      if (this.groupNameArr?.length == 1) {
+        this.filterList.forEach((item) => {
+          if (item.value == "groupId") {
+            // item.options = this.groupNameArr;
+            this.$set(item, "options", this.groupNameArr);
+          }
+        });
+        this.form.groupId = this.groupNameArr[0].groupId;
+        this.budgetTypeId = this.groupNameArr[0].budgetTypeId;
+      } else {
+        this.form.groupId = "";
+        this.budgetTypeId = "";
+      }
+      this.getTermName();
+    },
+
+    // 根据单位查询预算期间
+    async getTermName() {
+      let paramsF = {
+        unitNo: this.unitNo,
+        budgetUnitNo: this.form.budgetUnitNo,
+        groupId: this.form.groupId,
+        // businessDate: parseTime(new Date(this.businessDate), "{y}-{m}-{d}"),
+        // minDate: parseTime(new Date(this.businessDate), "{y}-{m}-{d}"),
+        // maxDate: parseTime(new Date(this.businessDate), "{y}-{m}-{d}"),
+        occupyTerm: 1,
+      };
+      let res = await getQuotaTerm(paramsF);
+      //先手动查询预算期间  存在有符合条件的预算期间时 再查预算科目 符合条件的预算期间应该只有1条数据
+      //TODO  预算2023.12月有需求 通过预算单位，预算系列，业务日期查询预算科目 后续根据情况看是否修改
+      if (res && res.length > 0) {
+        this.form.termId = res[0].termId;
+        this.submitForm("searchForm", true);
+      }
+    },
+    submitForm(formName, isInitPage = true) {
+      this.tableData1 = [];
+      if (isInitPage) {
+        this.pagination.page = 1;
+      }
+      if (!this.form.budgetUnitNo || !this.form.groupId || !this.form.termId) {
+        return;
+      }
+      // this.$refs[formName].validate((valid) => {  漏斗组件还不支持校验，先注释掉，后面支持了再放开
+      //   if (valid) {
+      this.form.budgetAccountNameLike =
+        this.form.budgetAccountNameLike &&
+        this.form.budgetAccountNameLike.replace(/\s/g, "");
+      let params = {
+        ...this.form,
+        businessDate: '',
+        currencyNo: this.currencyNo,
+        rpDir: this.rpDir == 1 ? 2 : 1,
+        "page.current": this.pagination.page,
+        "page.size": this.pagination.size,
+      };
+      getBudgetQuota(params).then((res) => {
+        this.tableData1 = this.transData1(res.list);
+        this.pagination.total = res.total;
+      });
+      // } else {
+      //   console.log("error submit!!");
+      //   return false;
+      // }
+      // });
+    },
+
+    queryReset() {
+      if (this.budgetUnitNameArr.length && this.budgetUnitNameArr.length > 1) {
+        this.form = {
+          budgetUnitNo: "",
+          groupId: "",
+          termId: "",
+          budgetAccountNameLike: "",
+        };
+      } else if (
+        this.budgetUnitNameArr.length &&
+        this.budgetUnitNameArr.length == 1
+      ) {
+        this.getUnitBudgetAllPullDown();
+        this.form.budgetAccountNameLike = "";
+      } else {
+        this.form = {
+          budgetUnitNo: "",
+          groupId: "",
+          termId: "",
+          budgetAccountNameLike: "",
+        };
+      }
+    },
+
+    clearValid() {
+      let $form = this.$refs.searchForm;
+      $form && $form.clearValidate();
+    },
+
+    // 初始时
+    async getInitData() {
+      this.queryReset();
+      this.clearValid();
+      await this.getUnitBudgetAllPullDown();
+      this.submitForm("searchForm", true);
+    },
+
+    // 表格1点击单行
+    choseBudget(val) {
+      this.budgetAccountData = val;
+      this.getCfbAmountPlanData();
+    },
+
+    //
+    getCfbAmountPlanData() {
+      let temp =
+        this.budgetUnitNameArr.filter(
+          (i) => i.budgetUnitNo == this.form.budgetUnitNo
+        ) || [];
+      let map = {
+        ...this.budgetAccountData,
+        budgetUnitNo: this.form.budgetUnitNo,
+        budgetUnitName: temp[0].budgetUnitName,
+        groupId: this.form.groupId,
+      };
+      this.$emit("receive", map);
+      this.close();
+    },
+    close() {
+      this.groupNameArr = [];
+      this.termNameArr = [];
+      this.$emit("cancel");
+    },
+    transData1(data) {
+      data.forEach((item) => {
+        item.transAmount = amountFormat(item.amount);
+        item.transUsedAmount = amountFormat(item.amount - item.usedAmount);
+        item.amount = amountFormat(item.amount);
+        item.balanceAmount = amountFormat(item.balanceAmount);
+      });
+      return data;
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.pager.cl-pagination {
+  height: 45px;
+}
+.fixed-dialog /deep/ .el-dialog__footer {
+  padding: 8px 0;
+}
+.tables {
+  position: relative;
+}
+.showplan /deep/ .el-dialog {
+  margin-top: 100px !important;
+}
+</style>