vue-insagent-pc/src/views/FinancialManagement/ExpenseManagement/ExpenseComponent.vue

<template>
  <div>
    <!-- 新增弹出框 -->
    <el-dialog
      class="dialog"
      :title="title"
      :close-on-click-modal="false"
      :before-close="resetForm"
      :visible.sync="dialogFormVisible"
      width="60%"
    >
      <el-form
        :model="formData"
        :rules="type == 1 ? externalRules : interiorRules"
        ref="formData"
        label-width="130px"
        size="small"
        class="frame"
      >
        <el-row v-if="type == 1">
          <el-col :span="12">
            <el-form-item label="账户类别" prop="outerFlag">
              <el-select
                v-model="formData.outerFlag"
                placeholder="请选择账户类别"
                @change="outChange"
              >
                <el-option label="内部账户" value="0"></el-option>
                <el-option label="外部账户" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="户名" prop="accountName">
              <el-input
                v-model="formData.accountName"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="type == 1 && formData.outerFlag == 0">
          <el-col :span="12">
            <el-form-item label="营业性质" prop="businessQuality">
              <el-select
                v-model="formData.businessQuality"
                placeholder="请选择营业性质"
              >
                <el-option
                  v-for="(item, index) in nature_businessData"
                  :key="index + 'yyxz'"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="成立日期" prop="establishTime">
              <el-date-picker
                v-model="formData.establishTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="type == 1 && formData.outerFlag == 0">
          <el-col :span="12">
            <el-form-item label="所属地" prop="owned">
              <el-input v-model="formData.owned" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="法人" prop="juridicalPerson">
              <el-input
                v-model="formData.juridicalPerson"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="type == 1 && formData.outerFlag == 0">
          <el-col :span="12">
            <el-form-item label="开票员" prop="biller">
              <el-input v-model="formData.biller" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开票额度" prop="invoicingAmount">
              <el-input-number
                v-model="formData.invoicingAmount"
                :min="0"
                :max="99999999999999999"
                label=""
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="formData.outerFlag == 0 && formDataId && type == 1">
          <el-col :span="12">
            <el-form-item label="剩余开票额度" prop="ssd">
              <el-input-number
                v-model="formData.invoicingAmountExcess"
                :min="0"
                :max="99999999999999999"
                label=""
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="暂估值"
              prop="tentativeEstimates"
              :rules="[
                {
                  required: true,
                  message: '暂估值不能为空',
                  trigger: 'blur',
                },
              ]"
            >
              <!-- { pattern: /^[1-9]\d*$/ , message: '暂估值不能小于等于0', trigger: 'blur'} -->
              <el-input-number
                v-model="formData.tentativeEstimates"
                :min="0"
                :max="99999999999999999"
                label=""
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="type == 1">
          <el-col :span="12">
            <el-form-item label="账户简称" prop="ssd">
              <el-input
                v-model="formData.simpleName"
                placeholder="请输入账户简称"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="type == 2">
          <el-col :span="12">
            <el-form-item label="账户性质" prop="accountQuality">
              <el-select
                v-model="formData.accountQuality"
                placeholder="请选择账户性质"
              >
                <el-option
                  v-for="item in dictionariesData"
                  :key="item.value + 'bb'"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="银行卡号" prop="bankCardNum">
              <el-input
                v-model="formData.bankCardNum"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="type == 2">
          <el-col :span="12">
            <el-form-item label="开户行" prop="bank">
              <el-input v-model="formData.bank" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col v-if="formData.outerFlag == 0" :span="12">
            <el-form-item label="开户行名称" prop="bankName">
              <el-input
                v-model="formData.bankName"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="formData.outerFlag == 0 && type == 2">
          <el-col :span="12">
            <el-form-item label="开户行号" prop="bankNum">
              <el-input
                v-model="formData.bankNum"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="证书有效期" prop="certExpirationDate">
              <el-date-picker
                v-model="formData.certExpirationDate"
                size="small"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                @change="setDateInterval($event)"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="formData.outerFlag == 0 && type == 2">
          <el-col :span="12">
            <el-form-item label="单日转账笔数限制" prop="dayStrokeNum">
              <el-input-number
                v-model="formData.dayStrokeNum"
                :min="0"
                :max="99999999999999999"
                label=""
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="对私单日限额" prop="priDayLines">
              <el-input-number
                v-model="formData.priDayLines"
                :min="0"
                :max="99999999999999999"
                label=""
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="formData.outerFlag == 0 && type == 2">
          <el-col :span="12">
            <el-form-item label="对私单笔限额" prop="priSingleLines">
              <el-input-number
                v-model="formData.priSingleLines"
                :min="0"
                :max="99999999999999999"
                label=""
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="对私年额度" prop="priYearLines">
              <el-input-number
                v-model="formData.priYearLines"
                :min="0"
                :max="99999999999999999"
                label=""
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="formData.outerFlag == 0 && type == 2">
          <el-col :span="12">
            <el-form-item label="对公单日限额" prop="pubDayLines">
              <el-input-number
                v-model="formData.pubDayLines"
                :min="0"
                :max="99999999999999999"
                label=""
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="对公单笔限额" prop="pubSingleLines">
              <el-input-number
                v-model="formData.pubSingleLines"
                :min="0"
                :max="99999999999999999"
                label=""
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="formData.outerFlag == 0 && type == 2">
          <el-col :span="12">
            <el-form-item label="余额" prop="balance">
              <el-input-number
                v-model="formData.balance"
                :min="0"
                :max="99999999999999999"
                label=""
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="对公年额度" prop="pubYearLines">
              <el-input-number
                v-model="formData.pubYearLines"
                :min="0"
                :max="99999999999999999"
                label=""
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="formData.outerFlag == 0 && formDataId && type == 2">
          <el-col :span="12">
            <el-form-item label="单日转账笔数剩余" prop="dayStrokeNumExcess">
              <el-input-number
                v-model="formData.dayStrokeNumExcess"
                :min="0"
                :max="99999999999999999"
                label=""
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="对私单日限额剩余" prop="priDayLinesExcess">
              <el-input-number
                v-model="formData.priDayLinesExcess"
                :min="0"
                :max="99999999999999999"
                label=""
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="formData.outerFlag == 0 && formDataId && type == 2">
          <el-col :span="12">
            <el-form-item label="对私年剩余额度" prop="priYearExcess">
              <el-input-number
                v-model="formData.priYearExcess"
                :min="0"
                :max="99999999999999999"
                label=""
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="对公单日限额剩余" prop="pubDayLinesExcess">
              <el-input-number
                v-model="formData.pubDayLinesExcess"
                :min="0"
                :max="99999999999999999"
                label=""
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="formData.outerFlag == 0 && formDataId && type == 2">
          <el-col :span="12">
            <el-form-item label="对公年剩余额度" prop="pubYearExcess">
              <el-input-number
                v-model="formData.pubYearExcess"
                :min="0"
                :max="99999999999999999"
                label=""
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支出金额" prop="spend">
              <el-input-number
                v-model="formData.spend"
                :min="0"
                :max="99999999999999999"
                label=""
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm()" size="small">取 消</el-button>
        <el-button type="primary" @click="submitForm('formData')" size="small"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "ExpenseComponent",
  props: {
    type: {
      type: Number,
      default: 1,
    },
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "新增",
    },
    nature_businessData: {
      //一般纳税数据字典
      type: Array,
      default: [],
    },
    formDataId: {
      type: String,
      default: "",
    },
    formData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      dictionariesData: [], //账户性质数据字典

      externalRules: {
        //账户表单规则
        outerFlag: [
          { required: true, message: "请选择账户类别", trigger: "change" },
        ],
        accountName: [
          { required: true, message: "户名不能为空", trigger: "blur" },
        ],
      },
      interiorRules: {
        //卡表单规则
        accountName: [
          { required: true, message: "户名不能为空", trigger: "blur" },
        ],
        accountQuality: [
          { required: true, message: "请选择账户性质", trigger: "change" },
        ],
        bankCardNum: [
          { required: true, message: "银行卡号不能为空", trigger: "blur" },
        ],
        bank: [{ required: true, message: "开户行不能为空", trigger: "blur" }],
        bankName: [
          { required: true, message: "开户行名称不能为空", trigger: "blur" },
        ],
        bankNum: [
          { required: true, message: "开户行号不能为空", trigger: "blur" },
        ],
        certExpirationDate: [
          {
            required: true,
            message: "请选择证书有效期",
            trigger: "change",
          },
        ],
      },
    };
  },
  watch: {
    dialogFormVisible(status) {
      !status
        ? this.$nextTick(() => {
            this.$refs.formData.clearValidate();
          })
        : "";
    },
  },
  created() {
    this.business("account_quality");
  },
  mounted() {},
  methods: {
    cleanForm() {
      this.$refs.formData.resetFields();
    },
    //账户类别change事件
    outChange(e) {
      this.$nextTick(() => {
        this.$refs.formData.clearValidate();
      });
      this.$emit("outChange", e);
    },
    //证书有效期change事件
    setDateInterval(e) {
      this.$emit("setDateInterval", e);
    },
    //数据字典
    business(typeName) {
      this.$api.dict.findByLableName(typeName).then((res) => {
        if (typeName == "account_quality") {
          this.dictionariesData = res.data;
        } else {
          this[typeName + "Data"] = res.data;
        }
      });
    },
    //提交
    submitForm(formData) {
      this.$refs[formData].validate((valid) => {
        if (valid) {
          this.$emit("submitForm");
        } else {
          return false;
        }
      });
    },
    //弹框取消重置
    resetForm() {
      this.$emit("resetForm");
    },
  },
};
</script>
<style scoped>
.dialog >>> .el-dialog__body {
  overflow-y: scroll;
  max-height: 500px;
}
.el-input-number,
.el-date-editor {
  width: 100% !important;
}
</style>