Smart_platform_ui/src/views/iosBasicData/accounts/assembly/accitemsopenblc.vue

<template>
  <div>
    <!--                   @resetColumn="resetColumnTwo('crud', 'option', 'optionBack', 323.1)"-->
    <!--                   @saveColumn="saveColumnTwo('crud', 'option', 'optionBack', 323.1)"-->
    <avue-crud
      id="out-table"
      ref="crud"
      :option="option"
      :table-loading="loading"
      :data="form.accItemsOpenblcList"
      :cell-style="{ padding: '0px' }"
      :header-cell-class-name="headerClassName"
      :row-style="{ height: '20px' }"
      @selection-change="selectionChange"
    >
      <template slot="menuLeft">
        <el-button type="primary" size="small" :disabled="!getCanModify" icon="el-icon-plus" @click="addButtonfun">新 增 </el-button>
        <el-button type="danger" size="small" icon="el-icon-delete" plain :disabled="!getCanModify" @click="handleDelete">删 除 </el-button>
        <!--        <span>{{ form }}<br />getCanModify:{{ getCanModify() }}<br />option：{{ option }}</span>-->
      </template>
      <template v-if="form.isCorp == 1" slot="corpShortName" slot-scope="{ row }">
        <search-query
          v-if="row.edit"
          :datalist="corpData"
          :selectValue="row.shortName"
          :filterable="true"
          :clearable="true"
          :remote="true"
          :buttonIf="false"
          placeholder="请选择客户名称"
          :forParameter="{ key: 'id', label: 'shortName', value: 'shortName' }"
          @remoteMethod="corpBcorpsListfun"
          @corpChange="corpChange($event, 'shortName', row)"
          @corpFocus="corpBcorpsListfun"
        >
        </search-query>
        <span v-else>{{ row.corpCnName }}</span>
      </template>
      <template v-if="form.isDept == 1" slot="deptName" slot-scope="{ row }">
        <tree-select
          v-if="row.edit"
          v-model="row.deptName"
          filterable
          :data="deptData"
          :props="{ label: 'title', children: 'children' }"
          nodeKey="title"
          size="small"
          :multiple="false"
          placeholder="请选择部门名称"
          @selectChange="corpChange($event, 'deptName', row)"
          @focus="deptDeptLazyTreefun"
        >
        </tree-select>
        <span v-else>{{ row.deptName }}</span>
      </template>
      <template v-if="form.isEmpl == 1" slot="emplName" slot-scope="{ row }">
        <search-query
          v-if="row.edit"
          :datalist="emplData"
          :selectValue="row.emplName"
          :filterable="true"
          :clearable="true"
          :remote="true"
          :buttonIf="false"
          placeholder="请选择职工名称"
          :forParameter="{ key: 'id', label: 'name', value: 'name' }"
          @remoteMethod="userPagelistfun"
          @corpChange="corpChange($event, 'emplName', row)"
          @corpFocus="userPagelistfun"
        >
        </search-query>
        <span v-else>{{ row.emplName }}</span>
      </template>
      <template v-if="form.isItem == 1" slot="itemName" slot-scope="{ row }">
        <search-query
          v-if="row.edit"
          :datalist="itemData"
          :selectValue="row.itemName"
          :filterable="true"
          :clearable="true"
          :remote="true"
          :buttonIf="false"
          placeholder="请选择核算项目"
          :forParameter="{ key: 'id', label: 'cnName', value: 'cnName' }"
          @remoteMethod="baccitemstypeListfun"
          @corpChange="corpChange($event, 'itemName', row)"
          @corpFocus="baccitemstypeListfun"
        >
        </search-query>
        <span v-else>{{ row.itemName }}</span>
      </template>

      <template slot="amountOpenDr" slot-scope="{ row }">
        <el-input-number
          v-if="row.edit"
          style="width: 100%"
          v-model="row.amountOpenDr"
          size="small"
          autocomplete="off"
          clearable
          placeholder="请输入年初借方金额"
          :precision="2"
          :controls="false"
          value-on-clear="0"
          align="right"
          @change="amountChange(row, 'amountOpenDr')"
        >
        </el-input-number>
        <span v-else>{{ fmtAmt(row.amountOpenDr) }}</span>
      </template>

      <template slot="amountOpenCr" slot-scope="{ row }">
        <el-input-number
          v-if="row.edit"
          style="width: 100%"
          v-model="row.amountOpenCr"
          size="small"
          autocomplete="off"
          clearable
          placeholder="请输入年初贷方金额"
          :precision="2"
          :controls="false"
          value-on-clear="0"
          align="right"
          @change="amountChange(row, 'amountOpenCr')"
        >
        </el-input-number>
        <span v-else>{{ fmtAmt(row.amountOpenCr) }}</span>
      </template>

      <template slot="amountDr" slot-scope="{ row }">
        <el-input-number
          v-if="row.edit"
          style="width: 100%"
          v-model="row.amountDr"
          size="small"
          autocomplete="off"
          clearable
          placeholder="请输入本年借方金额"
          :precision="2"
          :controls="false"
          value-on-clear="0"
          align="right"
          @change="amountChange(row, 'amountDr')"
        >
        </el-input-number>
        <span v-else>{{ fmtAmt(row.amountDr) }}</span>
      </template>

      <template slot="amountCr" slot-scope="{ row }">
        <el-input-number
          v-if="row.edit"
          style="width: 100%"
          v-model="row.amountCr"
          size="small"
          autocomplete="off"
          clearable
          placeholder="请输入本年贷方金额"
          :precision="2"
          :controls="false"
          value-on-clear="0"
          align="right"
          @change="amountChange(row, 'amountCr')"
        >
        </el-input-number>
        <span v-else>{{ fmtAmt(row.amountCr) }}</span>
      </template>

      <template slot="amountOpenDrUsd" slot-scope="{ row }">
        <el-input-number
          v-if="row.edit"
          style="width: 100%"
          v-model="row.amountOpenDrUsd"
          size="small"
          autocomplete="off"
          clearable
          placeholder="请输入外币年初借方金额"
          :precision="2"
          :controls="false"
          value-on-clear="0"
          align="right"
          @change="amountChange(row, 'amountOpenDrUsd')"
        >
        </el-input-number>
        <span v-else>{{ fmtAmt(row.amountOpenDrUsd) }}</span>
      </template>

      <template slot="amountOpenCrUsd" slot-scope="{ row }">
        <el-input-number
          v-if="row.edit"
          style="width: 100%"
          v-model="row.amountOpenCrUsd"
          size="small"
          autocomplete="off"
          clearable
          placeholder="请输入外币年初贷方金额"
          :precision="2"
          :controls="false"
          value-on-clear="0"
          align="right"
          @change="amountChange(row, 'amountOpenCrUsd')"
        >
        </el-input-number>
        <span v-else>{{ fmtAmt(row.amountOpenCrUsd) }}</span>
      </template>

      <template slot="amountDrUsd" slot-scope="{ row }">
        <el-input-number
          v-if="row.edit"
          style="width: 100%"
          v-model="row.amountDrUsd"
          size="small"
          autocomplete="off"
          clearable
          placeholder="请输入外币本年借方金额"
          :precision="2"
          :controls="false"
          value-on-clear="0"
          align="right"
          @change="amountChange(row, 'amountDrUsd')"
        >
        </el-input-number>
        <span v-else>{{ fmtAmt(row.amountDrUsd) }}</span>
      </template>

      <template slot="amountCrUsd" slot-scope="{ row }">
        <el-input-number
          v-if="row.edit"
          style="width: 100%"
          v-model="row.amountCrUsd"
          size="small"
          autocomplete="off"
          clearable
          placeholder="请输入外币本年贷方金额"
          :precision="2"
          :controls="false"
          value-on-clear="0"
          align="right"
          @change="amountChange(row, 'amountCrUsd')"
        >
        </el-input-number>
        <span v-else>{{ fmtAmt(row.amountCrUsd) }}</span>
      </template>

      <template slot="quantityOpenDr" slot-scope="{ row }">
        <el-input-number
          v-if="row.edit"
          style="width: 100%"
          v-model="row.quantityOpenDr"
          size="small"
          autocomplete="off"
          clearable
          placeholder="请输入年初借方数量"
          :precision="2"
          :controls="false"
          value-on-clear="0"
          align="right"
          @change="amountChange(row, 'quantityOpenDr')"
        >
        </el-input-number>
        <span v-else>{{ fmtAmt(row.quantityOpenDr) }}</span>
      </template>

      <template slot="quantityOpenCr" slot-scope="{ row }">
        <el-input-number
          v-if="row.edit"
          style="width: 100%"
          v-model="row.quantityOpenCr"
          size="small"
          autocomplete="off"
          clearable
          placeholder="请输入年初贷方数量"
          :precision="2"
          :controls="false"
          value-on-clear="0"
          align="right"
          @change="amountChange(row, 'quantityOpenCr')"
        >
        </el-input-number>
        <span v-else>{{ fmtAmt(row.quantityOpenCr) }}</span>
      </template>

      <template slot="quantityDr" slot-scope="{ row }">
        <el-input-number
          v-if="row.edit"
          style="width: 100%"
          v-model="row.quantityDr"
          size="small"
          autocomplete="off"
          clearable
          placeholder="请输入本年借方数量"
          :precision="2"
          :controls="false"
          value-on-clear="0"
          align="right"
          @change="amountChange(row, 'quantityDr')"
        >
        </el-input-number>
        <span v-else>{{ fmtAmt(row.quantityDr) }}</span>
      </template>

      <template slot="quantityCr" slot-scope="{ row }">
        <el-input-number
          v-if="row.edit"
          style="width: 100%"
          v-model="row.quantityCr"
          size="small"
          autocomplete="off"
          clearable
          placeholder="请输入本年贷方数量"
          :precision="2"
          :controls="false"
          value-on-clear="0"
          align="right"
          @change="amountChange(row, 'quantityCr')"
        >
        </el-input-number>
        <span v-else>{{ fmtAmt(row.quantityCr) }}</span>
      </template>

      <template slot="menu" slot-scope="{ row }" v-if="getCanModify">
        <el-button type="text" size="small" v-if="row.edit" @click="editFun(row)">保存 </el-button>
        <el-button type="text" size="small" v-else @click="editFun(row)">编辑 </el-button>

        <el-button type="text" size="small" @click="rowDel(row)">删除 </el-button>
      </template>
    </avue-crud>
  </div>
</template>

<script>
import SearchQuery from "@/components/iosbasic-data/searchquery.vue";
import { getBcorpslistByType } from "@/api/iosBasicData/bcorps";
import { baccitemstypeList } from "@/api/iosBasicData/baccitemstype";
import { getDeptTree } from "@/api/system/dept";
import TreeSelect from "@/components/iosbasic-data/TreeSelect.vue";
import { getList as userPagelist } from "@/api/system/user";
import { accountsSubmit } from "@/api/iosBasicData/accounts";
import { selectEmpls } from "@/api/approval/processConfig";

export default {
  components: { TreeSelect, SearchQuery },
  props: {
    form: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      corpData: [], // 客户数据
      deptData: [], // 部门名称数据
      emplData: [], // 员工数据
      itemData: [], // 核算项目
      multipleChoiceList: [], // 多选数据
      option: {
        height: "60vh",
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        selection: true,
        dialogClickModal: false,
        addBtn: false,
        viewBtn: false,
        delBtn: false,
        editBtn: false,
        menuWidth: 100,
        columnBtn: false, // 隐藏列设置
        refreshBtn: false, // 刷新按钮
        column: [],
      },
      loading: false,
    };
  },
  async created() {},
  methods: {
    buildOptionColumns() {
      let cols = [];
      if (this.form.isCorp == 1) {
        cols.push({
          label: "客户编号",
          prop: "corpCode",
          width: 120,
        });
        cols.push({
          label: "客户名称",
          prop: "corpShortName",
          width: 220,
        });
      }
      if (this.form.isDept == 1) {
        cols.push({
          label: "核算部门",
          prop: "deptName",
          width: 180,
        });
      }
      if (this.form.isEmpl == 1) {
        cols.push({
          label: "核算职员",
          prop: "emplName",
          width: 160,
        });
      }
      if (this.form.isItem == 1) {
        cols.push(
          {
            label: "核算项目类别",
            prop: "itemClassify",
            width: 160,
          },
          {
            label: "核算项目",
            prop: "itemName",
            width: 180,
          }
        );
      }
      cols.push({
        label: "本币期初",
        children: [
          {
            label: "年初借方",
            prop: "amountOpenDr",
            width: 120,
            align: "right",
          },
          {
            label: "年初贷方",
            prop: "amountOpenCr",
            width: 120,
            align: "right",
          },
          {
            label: "年初余额",
            prop: "amountOpenBlc",
            width: 120,
            align: "right",
          },
          {
            label: "本年借方",
            prop: "amountDr",
            width: 120,
            align: "right",
          },
          {
            label: "本年贷方",
            prop: "amountCr",
            width: 120,
            align: "right",
          },
          {
            label: "当前余额",
            prop: "amountBlc",
            width: 120,
            align: "right",
          },
        ],
      });
      if (this.form.isForeign == 1) {
        cols.push({
          label: "外币期初",
          children: [
            {
              label: "年初借方",
              prop: "amountOpenDrUsd",
              width: 120,
              align: "right",
            },
            {
              label: "年初贷方",
              prop: "amountOpenCrUsd",
              width: 120,
              align: "right",
            },
            {
              label: "年初余额",
              prop: "amountOpenUsdBlc",
              width: 120,
              align: "right",
            },
            {
              label: "本年借方",
              prop: "amountDrUsd",
              width: 120,
              align: "right",
            },
            {
              label: "本年贷方",
              prop: "amountCrUsd",
              width: 120,
              align: "right",
            },
            {
              label: "当前余额",
              prop: "amountUsdBlc",
              width: 120,
              align: "right",
            },
          ],
        });
      }
      if (this.form.isQuantity == 1) {
        cols.push({
          label: "数量期初",
          children: [
            {
              label: "年初借方",
              prop: "quantityOpenDr",
              width: 120,
              align: "right",
            },
            {
              label: "年初贷方",
              prop: "quantityOpenCr",
              width: 120,
              align: "right",
            },
            {
              label: "年初余额",
              prop: "quantityOpenBlc",
              width: 120,
              align: "right",
            },
            {
              label: "本年借方",
              prop: "quantityDr",
              width: 120,
              align: "right",
            },
            {
              label: "本年贷方",
              prop: "quantityCr",
              width: 120,
              align: "right",
            },
            {
              label: "当前余额",
              prop: "quantityBlc",
              width: 120,
              align: "right",
            },
          ],
        });
      }
      cols.push({
        label: "备注",
        prop: "remarks",
      });
      this.option.column = cols;
    },
    getCanModify() {
      if (this.form) {
        return this.form.isDetail && (this.form.isCorp == 1 || this.form.isDept == 1 || this.form.isEmpl == 1 || this.form.isItem == 1);
      } else {
        return false;
      }
    },
    // 添加
    addButtonfun() {
      this.form.accItemsOpenblcList.push({
        edit: true,
      });
    },
    // 多选
    selectionChange(list) {
      this.multipleChoiceList = list;
    },
    // 编辑
    editFun(row) {
      this.$set(row, "edit", !row.edit);
    },
    // 批量删除
    handleDelete() {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        for (let item of this.multipleChoiceList) {
          this.form.accItemsOpenblcList.splice(item.$index, 1);
        }
        this.$message.success("操作成功!");
      });
    },
    // 删除
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.form.accItemsOpenblcList.splice(row.$index, 1);
        this.$message.success("操作成功!");
      });
    },
    forceAmt(val) {
      let amt = Number(val);
      return isNaN(amt) ? 0.0 : Number(amt.toFixed(2));
    },
    fmtAmt(val) {
      let amt = this.forceAmt(val);
      let S = amt.toFixed(2);
      return S == "0.00" ? "" : S;
    },
    amountChange(row, fieldName) {
      if (fieldName === "amountOpenDr" || fieldName === "amountOpenCr") {
        if (row.dc === "D") {
          this.$set(row, "amountOpenBlc", this.forceAmt(row.amountOpenDr) - this.forceAmt(row.amountOpenCr));
          this.$set(row, "amountBlc", this.forceAmt(row.amountOpenBlc) + this.forceAmt(row.amountDr) - this.forceAmt(row.amountCr));
        } else {
          this.$set(row, "amountOpenBlc", this.forceAmt(row.amountOpenCr) - this.forceAmt(row.amountOpenDr));
          this.$set(row, "amountBlc", this.forceAmt(row.amountOpenBlc) + this.forceAmt(row.amountCr) - this.forceAmt(row.amountDr));
        }
      }
      if (fieldName === "amountDr" || fieldName === "amountCr") {
        if (row.dc === "D") {
          this.$set(row, "amountBlc", this.forceAmt(row.amountOpenBlc) + this.forceAmt(row.amountDr) - this.forceAmt(row.amountCr));
        } else {
          this.$set(row, "amountBlc", this.forceAmt(row.amountOpenBlc) + this.forceAmt(row.amountCr) - this.forceAmt(row.amountDr));
        }
      }
      if (fieldName === "amountOpenDrUsd" || fieldName === "amountOpenCrUsd") {
        if (row.dc === "D") {
          this.$set(row, "amountOpenUsdBlc", this.forceAmt(row.amountOpenDrUsd) - this.forceAmt(row.amountOpenCrUsd));
          this.$set(row, "amountUsdBlc", this.forceAmt(row.amountOpenUsdBlc) + this.forceAmt(row.amountDrUsd) - this.forceAmt(row.amountCrUsd));
        } else {
          this.$set(row, "amountOpenUsdBlc", this.forceAmt(row.amountOpenCrUsd) - this.forceAmt(row.amountOpenDrUsd));
          this.$set(row, "amountUsdBlc", this.forceAmt(row.amountOpenUsdBlc) + this.forceAmt(row.amountCrUsd) - this.forceAmt(row.amountDrUsd));
        }
      }
      if (fieldName === "amountDrUsd" || fieldName === "amountCrUsd") {
        if (row.dc === "D") {
          this.$set(row, "amountUsdBlc", this.forceAmt(row.amountOpenUsdBlc) + this.forceAmt(row.amountDrUsd) - this.forceAmt(row.amountCrUsd));
        } else {
          this.$set(row, "amountUsdBlc", this.forceAmt(row.amountOpenUsdBlc) + this.forceAmt(row.amountCrUsd) - this.forceAmt(row.amountDrUsd));
        }
      }
      if (fieldName === "quantityOpenDr" || fieldName === "quantityOpenCr") {
        if (row.dc === "D") {
          this.$set(row, "quantityOpenBlc", this.forceAmt(row.quantityOpenDr) - this.forceAmt(row.quantityOpenCr));
          this.$set(row, "quantityBlc", this.forceAmt(row.quantityOpenBlc) + this.forceAmt(row.quantityDr) - this.forceAmt(row.quantityCr));
        } else {
          this.$set(row, "quantityOpenBlc", this.forceAmt(row.quantityOpenCr) - this.forceAmt(row.quantityOpenDr));
          this.$set(row, "quantityBlc", this.forceAmt(row.quantityOpenBlc) + this.forceAmt(row.quantityCr) - this.forceAmt(row.quantityDr));
        }
      }
      if (fieldName === "quantityDr" || fieldName === "quantityCr") {
        if (row.dc === "D") {
          this.$set(row, "quantityBlc", this.forceAmt(row.quantityOpenBlc) + this.forceAmt(row.quantityDr) - this.forceAmt(row.quantityCr));
        } else {
          this.$set(row, "quantityBlc", this.forceAmt(row.quantityOpenBlc) + this.forceAmt(row.quantityCr) - this.forceAmt(row.quantityDr));
        }
      }
    },
    // 下拉数据
    corpChange(value, name, row) {
      let bf = false;
      if (name == "shortName") {
        for (let item of this.corpData) {
          if (item.shortName == value) {
            this.$set(row, "corpId", item.id);
            this.$set(row, "corpCode", item.code);
            this.$set(row, "corpShortName", item.shortName);
            this.$set(row, "corpCnName", item.cnName);
            this.$set(row, "corpEnName", item.enName);
            bf = true;
          }
        }
        if (!bf) {
          this.$set(row, "corpId", 0);
          this.$set(row, "corpCode", "");
          this.$set(row, "corpShortName", "");
          this.$set(row, "corpCnName", "");
          this.$set(row, "corpEnName", "");
        }
      } else if (name == "emplName") {
        for (let item of this.emplData) {
          if (item.name == value) {
            this.$set(row, "emplId", item.id);
            this.$set(row, "emplName", item.name);
            bf = true;
          }
        }
        if (!bf) {
          this.$set(row, "emplId", 0);
          this.$set(row, "emplName", "");
        }
      } else if (name == "itemName") {
        for (let item of this.itemData) {
          if (item.cnName == value) {
            this.$set(row, "itemId", item.id);
            this.$set(row, "itemName", item.cnName);
            bf = true;
          }
        }
        if (!bf) {
          this.$set(row, "itemId", 0);
          this.$set(row, "itemName", "");
        }
      } else if (name == "deptName") {
        if (value && value.id) {
          this.$set(row, "deptId", value.id);
          this.$set(row, "deptName", value.title);
        }else{
          this.$set(row, "deptId", 0);
          this.$set(row, "deptName", "");
        }
      } else {
        this.$set(row, name, value);
      }
    },
    // 获取核算客户数据
    corpBcorpsListfun(shortName) {
      getBcorpslistByType(1, 10, { shortName }).then((res) => {
        this.corpData = res.data.data.records;
      });
    },
    // 获取部分数据
    deptDeptLazyTreefun() {
      getDeptTree().then((res) => {
        this.deptData = res.data.data;
      });
    },
    // 获取员工数据
    userPagelistfun(emplName) {
      selectEmpls(1, 10, { cname: emplName, whetherEmployedOrNot: 1 }).then((res) => {
        if (Array.isArray(res.data.data.records)) {
          res.data.data.records.forEach((item) => {
            item.name = item.cname;
          });
        }
        this.emplData = res.data.data.records;
      });
    },
    // 获取核算项目数据
    baccitemstypeListfun(cnName) {
      baccitemstypeList(1, 10, { cnName }).then((res) => {
        this.itemData = res.data.data.records;
      });
    },
    //自定义列保存
    async saveColumnTwo(ref, option, optionBack, code) {
      /**
       * 已定义全局方法，直接使用，saveColumnData保存列数据方法,参数传值(表格名称，当前表格的option数据)
       * 已定义全局方法，直接使用，getColumnName方法用来获取枚举值，参数根据自己定义的code值获取中文名
       * 一定要执行异步操作，要等接口成功返回，才能执行下一行代码
       */
      const inSave = await this.saveColumnData(this.getColumnName(code), this[option]);
      if (inSave) {
        this.$message.success("保存成功");
        //关闭窗口
        this.$refs[ref].$refs.dialogColumn.columnBox = false;
      }
    },
    //自定义列重置
    async resetColumnTwo(ref, option, optionBack, code) {
      this[option] = this[optionBack];
      const inSave = await this.delColumnData(this.getColumnName(code), this[optionBack]);
      if (inSave) {
        this.$message.success("重置成功");
        this.$refs[ref].$refs.dialogColumn.columnBox = false;
      }
    },
    // 更改表格颜色
    headerClassName(tab) {
      //颜色间隔
      let back = "";
      if (tab.columnIndex >= 0 && tab.column.level === 1) {
        if (tab.columnIndex % 2 === 0) {
          back = "back-one";
        } else if (tab.columnIndex % 2 === 1) {
          back = "back-two";
        }
      }
      return back;
    },
  },
};
</script>

<style scoped>
::v-deep#out-table .back-one {
  /* background: #ecf5ff !important; */
  text-align: center;
}
::v-deep#out-table .back-two {
  /* background: #ecf5ff !important; */
  text-align: center;
}
::v-deep .avue-crud .el-input-number .el-input__inner {
  text-align: right;
}
</style>