xnzt/xnzt-h5/pages/accounts/incomeSort/index.vue

<template>
  <view class="incomeSort">
    <view>
      <uni-forms ref="form" :rules="rules" :model="form" class="form" label-position="top" label-width="100%"
        validate-trigger="bind">
        <uni-forms-item label="一级分类" name="firstId">
          <uni-data-select v-model="form.firstId" :localdata="firstList" placeholder="请选择一级分类" @change="handleChange" />
        </uni-forms-item>
        <uni-forms-item label="二级分类" name="secondId">
          <uni-data-select v-model="form.secondId" :localdata="secondList" placeholder="请选择二级分类" />
        </uni-forms-item>
        <uni-forms-item label="记账时间" name="billingTime">
          <uni-datetime-picker type="date" v-model="form.billingTime" placeholder="请选择记账时间" />
        </uni-forms-item>
        <uni-forms-item label="金额(元)" name="amount">
          <uni-easyinput v-model="form.amount" placeholder="请输入金额(元)" type="number" />
        </uni-forms-item>
        <uni-forms-item label="贷款时间" name="loanDate" v-if="this.loansState">
          <uni-datetime-picker type="date" v-model="form.loanDate" placeholder="请选择贷款时间" />
        </uni-forms-item>
        <uni-forms-item label="贷款银行" name="bank" v-if="this.loansState">
          <uni-easyinput v-model="form.bank" placeholder="请输入贷款银行" />
        </uni-forms-item>
        <uni-forms-item label="贷款用途" name="loanUse" v-if="this.loansState">
          <uni-data-select v-model="form.loanUse" placeholder="请选择贷款用途" :localdata="dictLists['loan_use']" />
        </uni-forms-item>
        <uni-forms-item label="贷款期限" prop="loanLimit" v-if="this.loansState">
          <uni-easyinput v-model="form.loanLimit" placeholder="请输入贷款期限" />
        </uni-forms-item>
        <uni-forms-item label="贷款月息" prop="loanInterest" v-if="this.loansState">
          <uni-easyinput v-model="form.loanInterest" placeholder="请输入贷款月息" />
        </uni-forms-item>
        <uni-forms-item label="借款来源" prop="borrowOrigin" v-if="this.borrowState">
          <uni-data-select v-model="form.borrowOrigin" placeholder="请选择贷款用途" :localdata="dictLists['loan_orgin']" />
        </uni-forms-item>
        <uni-forms-item label="借款时间" prop="borrowDate" v-if="this.borrowState">
          <uni-datetime-picker type="date" v-model="form.borrowDate" placeholder="请选择借款时间" />
        </uni-forms-item>
        <uni-forms-item label="借款用途" prop="borrowUse" v-if="this.borrowState">
          <uni-data-select v-model="form.borrowUse" placeholder="请选择贷款用途" :localdata="dictLists['loan_use']" />
        </uni-forms-item>
        <uni-forms-item label="借款时长" prop="borrowLimit" v-if="this.borrowState">
          <uni-easyinput v-model="form.borrowLimit" placeholder="请输入借款时长" />
        </uni-forms-item>
        <uni-forms-item label="借款月息" prop="borrowInterest" v-if="this.borrowState">
          <uni-easyinput v-model="form.borrowInterest" placeholder="请输入借款月息" />
        </uni-forms-item>
        <uni-forms-item label="还款来源" prop="repaymentOrigin" v-if="this.borrowState">
          <uni-data-select v-model="form.repaymentOrigin" placeholder="请选择还款来源" :localdata="dictLists['loan_orgin']" />
        </uni-forms-item>
        <uni-forms-item label="保险公司" prop="insuranceCompany" v-if="this.insuranceState">
          <uni-data-select v-model="form.insuranceCompany" placeholder="请选择保险公司"
            :localdata="dictLists['insurance_compan']" />
        </uni-forms-item>
        <uni-forms-item label="保险品种" prop="insuranceItem" v-if="this.insuranceState">
          <uni-easyinput v-model="form.insuranceItem" placeholder="请输入保险品种" />
        </uni-forms-item>
        <uni-forms-item label="灾害原因" prop="disaster" v-if="this.insuranceState">
          <uni-data-select v-model="form.disaster" placeholder="请选择灾害原因" :localdata="dictLists['disaster']" />
        </uni-forms-item>
        <uni-forms-item label="其他收入" prop="otherIncome" v-if="this.elseState">
          <uni-easyinput v-model="form.otherIncome" placeholder="请输入其他收入" />
        </uni-forms-item>
      </uni-forms>
    </view>
    <view style="height: 44px">
      <button v-if="false">
        <text>{{ "测 试" }}</text>
      </button>
    </view>

    <view v-if="true" class="foot">
      <button @click="cencel" :plain="false" class="cencel">
        <text>{{ "取 消" }}</text>
      </button>
      <button @click="showConfirm" type="primary" class="confirm">
        <text>{{ "确 认" }}</text>
      </button>
    </view>
  </view>
</template>

<script>
import {
  listIncome,
  getIncome,
  delIncome,
  addIncome,
  updateIncome,
} from "@/api/income/income";
import {
  queryIncomeCategory,
  queryIncomeByPid,
  getIncomeCategory,
  listIncomeCategory,
} from "@/api/income/incomeCategory";
export default {
  name: "incomeSort",
  components: {},
  props: {},
  data() {
    return {
      contractUrl: [],
      options: {},
      form: {},
      dictLists: {},
      list: [],
      firstList: [],
      secondList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      rules: {
        firstId: {
          rules: [
            {
              required: true,
              errorMessage: "请选择分类",
            },
          ],
        },
        billingTime: {
          rules: [
            {
              required: true,
              errorMessage: "请输入记账时间",
            },
          ],
        },
        amount: {
          rules: [
            {
              required: true,
              errorMessage: "请输入金额",
            },
          ],
        },
      },
      incomeCategoryList: [],
      incCaDetailList: [],
      //贷款
      loansState: false,
      //借款
      borrowState: false,
      //保险
      insuranceState: false,
      //其他
      elseState: true,
    };
  },
  computed: {},
  methods: {
    // 表单重置
    reset() {
      this.form = {
        id: null,
        baseId: null,
        firstId: null,
        secondId: null,
        billingTime: null,
        amount: null,
        area: null,
        repayment: null,
        repaymentDate: null,
        borrow: null,
        insurance: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
      };
    },
    async getRouter(options) {
      this.options = options;
    },
    naviBack(isNew) {
      let pages = getCurrentPages(); //关于获取页面的官方文档https://uniapp.dcloud.io/api/window/window
      let prevPage = pages[pages.length - 2];
      uni.navigateBack({
        delta: 1,
        success: () => {
          if (isNew !== undefined) {
            setTimeout(function () {
              prevPage.$vm.getMsg(isNew);
            }, 200);
          }
        },
      });
    },
    cencel() {
      this.naviBack();
    },
    submitForm() {
      let form = this.form;
      let isNew = form.id === null || form.id === undefined || form.id === "";
      form.secondId =
        form.secondId === null || form.secondId === ""
          ? form.firstId
          : form.secondId;
      form.firstId = null;
      if (isNew) {
        addIncome(form).then((response) => {
          this.naviBack(isNew);
        });
      } else {
        updateIncome(form).then((response) => {
          this.naviBack(isNew);
        });
      }
    },
    //获取到选中支出分类ID
    handleChange(value) {
      const that = this;
      this.secondList = [];
      this.form.secondId =
        that.form.firstId === value ? this.form.secondId : null;
      if (typeof value === "undefined" || value == null || value === "") {
      } else {
        that.incomeCategoryList.forEach((element) => {
          if (element.value === value) {
            element.children.forEach((CEle) => {
              this.secondList.push({ value: CEle.value, text: CEle.label });
            });
          }
          this.decideShowBySelId(value);
        });
      }
    },
    /** 查询支出分类列表 */
    getincomeSortCategoryList() {
      queryIncomeCategory().then((response) => {
        this.incomeCategoryList = response.data;
        response.data.forEach((val, index) => {
          this.firstList.push({ value: val.value, text: val.label });
        });
      });
    },
    getLists() {
      listIncomeCategory({ status: 0 }).then((res) => {
        res.data.forEach((element) => {
          this.$set(this.incCaDetailList, [element.id], element);
        });
      });
    },
    //获取到选中支出分类ID
    decideShowBySelId(value) {
      const that = this;
      var loans = /贷款/;
      var borrow = /借款/;
      var insurance = /保险/;
      if (loans.test(that.incCaDetailList[value].name)) {
        this.loansState = true;
        this.borrowState = false;
        this.insuranceState = false;
        this.elseState = false;
      } else if (borrow.test(that.incCaDetailList[value].name)) {
        this.loansState = false;
        this.borrowState = true;
        this.insuranceState = false;
        this.elseState = false;
      } else if (insurance.test(that.incCaDetailList[value].name)) {
        this.loansState = false;
        this.borrowState = false;
        this.insuranceState = true;
        this.elseState = false;
      } else {
        this.loansState = false;
        this.borrowState = false;
        this.insuranceState = false;
        this.elseState = true;
      }
    },
    async initializeDict() {
      this.dictByType("loan_use");
      this.dictByType("disaster");
      this.dictByType("insurance_compan");
      this.dictByType("loan_orgin");
    },
    dictByType(type) {
      this.getDicts(type).then((response) => {
        let dicts = [];
        for (let dict of response.data) {
          let element = {};
          element["value"] = dict.dictValue;
          element["text"] = dict.dictLabel;
          element["label"] = dict.dictLabel;
          dicts.push(element);
        }
        this.$set(this.dictLists, type, dicts);
      });
    },
    showConfirm() {
      this.$refs["form"].validate().then((res) => {
        this.$modal.confirm("确认提交").then((res) => {
          if (res === true) {
            this.submitForm();
          }
        });
      });
    },
  },
  watch: {
    loading: {
      handler: function (val, oldVal) {
        if (val === true) {
          this.$modal.loading("加载中，请耐心等待...");
        } else {
          this.$modal.closeLoading();
        }
      },
      deep: true,
    },
  },

  // 页面周期函数--监听页面加载
  onLoad(options) {
    this.initializeDict();
    this.reset();
    this.getRouter(options).then(() => {
      if (options.id != undefined) {
        this.getLandManagementById();
      }
    });
    this.getincomeSortCategoryList();
    this.getLists();
  },
  // 页面周期函数--监听页面初次渲染完成
  onReady() { },
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() { },
  // 页面周期函数--监听页面隐藏
  onHide() { },
  // 页面周期函数--监听页面卸载
  onUnload() {
    const that = this
    return that.$listenOB.goBack()
  },
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
};
</script>

<style lang="scss" scoped>
page {
  background: white;
}

.incomeSort {
  background-color: white;
  height: calc(100%);

  .foot {
    width: 100vw;
    height: 44px;
    bottom: 0px;
    display: flex;
    position: fixed;
    z-index: 2;

    .cencel {
      border-radius: 0px;
      border: 0px;
      width: 50%;
      background-color: white;
    }

    .confirm {
      border-radius: 0px;
      border: 0px;
      width: 50%;
      color: white;
    }
  }
}

.form {
  text-align: center;
  margin: auto;
  width: 80%;

  /deep/ .flex-radio {
    uni-radio-group {
      width: 100%;

      .checklist-group {
        display: flex;
        justify-content: space-evenly;
      }
    }
  }

  /deep/ .uni-forms-item {
    .uni-forms-item__content {
      .uni-file-picker {
        .uni-file-picker__header {
          .file-title {
            span {
              color: #ff0000a6;
            }
          }
        }
      }

      .uni-mt-5 {
        .uni-icons {
          background: #007aff21;
          line-height: 35px;
          height: 35px;
        }
      }

      .uni-select-cy {
        z-index: 1;

        .uni-select-cy-select {
          z-index: -500;
        }
      }
    }
  }
}
</style>