Smart_platform_ui/src/views/tirePartsMall/financialManagement/paymentSettlement/detailsPage.vue

<template>
  <div>
    <div class="customer-head">
      <div class="customer-back">
        <el-button type="danger" style="border: none;background: none;color: red" icon="el-icon-arrow-left"
                   @click="backToList(0)">返回列表
        </el-button>
      </div>
      <div class="add-customer-btn">
        <!--        <el-button class="el-button&#45;&#45;small-yh" style="margin-right: 10px" type="primary" size="small" v-if="!editButton"-->
        <!--                   @click="confirmEditing">编辑-->
        <!--        </el-button>-->
        <el-button
            class="el-button--small-yh"
            type="primary"
            size="small"
            @click="editCustomer">保存数据
        </el-button>
        <el-button
            class="el-button--small-yh"
            type="primary"
            size="small"
            v-if="form.id">启用
        </el-button>
      </div>
    </div>
    <div style="margin-top: 50px">
      <trade-card title="基础信息">
        <avue-form :option="optionForm" v-model="form" ref="form"></avue-form>
      </trade-card>
      <trade-card title="明细信息">
        <avue-crud :option="optionContacts" v-model="formContacts" ref="formContacts" :data="form.contactsList"
                   @row-save="rowSave"
                   @row-update="rowUpdate"
                   @resetColumn="resetColumnTwo('formContacts','optionContacts','optionContactsBack',266.1)"
                   @saveColumn="saveColumnTwo('formContacts','optionContacts','optionContactsBack',266.1)">
          <template slot-scope="scope" slot="menuLeft">
            <el-button type="primary" icon="el-icon-plus" :disabled="form.financeStatus == '已付款' " size="small" @click="rowAdd()">选择订单</el-button>
          </template>
          <template slot-scope="{type,size,row,index,disabled}" slot="menu">
            <el-button
                :size="size" :disabled="disabled" :type="type"
                :icon="row.$cellEdit?'el-icon-plus':'el-icon-edit'"
                @click="$refs.formContacts.rowCell(row,index)"
            >{{ row.$cellEdit ? '确认' : '修改' }}
            </el-button>
            <el-button icon="el-icon-delete" :size="size" :disabled="disabled" :type="type"
                       @click="rowDelBox(row,index)">删除
            </el-button>
          </template>
        </avue-crud>
      </trade-card>
    </div>
    <el-dialog title="导入销售" append-to-body class="el-dialogDeep" :visible.sync="billDetailDialog" width="80%"
      :close-on-click-modal="false" :destroy-on-close="true" :close-on-press-escape="false" top="10vh" v-dialog-drag>
      <bill-detail :params="params" :billType="billType" :flag="1" @closeFun="closeBillDetail"
        @importProMent="importProMent">
      </bill-detail>
    </el-dialog>
  </div>
</template>

<script>
import billDetail from "@/components/bill/selectOrderDetailList";

export default {
  name: "detailsPage",
  components: {
    billDetail
  },
  data() {
    return {
      billDetailDialog:false,
      disabled: false,
      form: {
        contactsList: []
      },
      optionForm: {
        menuBtn: false,
        span: 8,
        column: [{
          label: '供应商',
          prop: "corpId",
          rules: [{
            required: true,
            message: " ",
            trigger: "blur"
          }]
        }, {
          label: '付款账户',
          prop: "accountId",
          rules: [{
            required: true,
            message: " ",
            trigger: "blur"
          }]
        }, {
          label: '金额',
          prop: "amount",
          rules: [{
            required: true,
            message: " ",
            trigger: "blur"
          }]
        }, {
          label: "经办人",
          prop: "handledById",
          type: "select",
          props: {
            label: "name",
            value: "id"
          },
          dicUrl: "/api/blade-user/client/gainUser",
          filterable: true,
          rules: [{
            required: true,
            message: " ",
            trigger: "blur"
          }]
        }, {
          label: '付款日期',
          prop: "settlementDate",
        }, {
          label: '备注',
          prop: "remarks",
          type: 'textarea',
          span: 24,
          minRows: 2
        }]
      },
      formContacts: {},
      optionContacts: {},
      optionContactsBack: {
        align: 'center',
        index: true,
        addBtnText: "录入明细",
        refreshBtn: false,
        dialogDrag: true,
        addBtn: false,
        span: 8,
        height: 600,
        addRowBtn: false,
        editBtn: false,
        delBtn: false,
        menuWidth: 140,
        dialogTop: 25,
        dialogWidth: "80%",
        column: [{
          label: '单据编号',
          prop: 'attn',
          cell: true
        }, {
          label: '合同号',
          prop: 'contractNumber',
          cell: true
        }, {
          label: '应付金额',
          prop: 'accountsAmount',
          cell: true
        }, {
          label: '结算金额',
          prop: 'settlmentAmount',
          cell: true
        }, {
          label: '本次金额',
          prop: 'thisAmount',
          cell: true
        }, {
          label: '备注',
          prop: 'remarks',
          cell: true
        }]
      }
    }
  },
  async created() {
    this.optionContacts = await this.getColumnData(this.getColumnName(266.1), this.optionContactsBack);
  },
  methods: {
    rowDelBox(row, index) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
          if (row.id) {
            // tradingBox(row.id).then(res => {
            //   this.form.contactsList.splice(index, 1);
            //   this.$message.success("操作成功!");
            // });
          } else {
            this.form.contactsList.splice(index, 1);
            this.$message.success("操作成功!");
          }
        }
      )
      ;
    },
    rowAdd(){
      if (!this.form.corpId) {
        this.$message.warning("请先选择客户!")
        return
      }
      this.params = {
        customerId: this.form.corpId,
        generateTask: '已生成',
        bsType: 'XS',
        actualPaymentStatus: '2'
      }
      this.billDetailDialog = true;

    },
    rowSave(form, done, loading) {
      done(form)
    },
    rowUpdate(form, index, done, loading) {
      done(form)
    },
    //自定义列保存
    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;
      }
    },
    backToList(type) {
      this.$emit("backToList", type);
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-form-item {
  margin-bottom: 8px !important;
}
</style>