Smart_platform_ui/src/views/iosBasicData/rateManagement/detailsPage.vue

<template>
  <div class="borderless" v-loading="allloading">
    <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">返回列表
        </el-button>
      </div>
      <div class="add-customer-btn">
        <el-button type="primary" size="small" v-if="detailData.status == 1" class="el-button--small-yh "
          :disabled="form.status > 0" @click.stop="openEdit">编辑
        </el-button>
        <el-button class="el-button--small-yh" type="primary" :disabled="loadingBtn || detailData.status == 1"
          size="small" @click="editCustomer">保存数据
        </el-button>
      </div>
    </div>
    <div class="customer-main">
      <containerTitle title="基础资料"></containerTitle>
      <basic-container>
        <avue-form class="trading-form" ref="form" v-model="form" :option="option">
          <template slot="parities">
            <el-input-number v-model="form.parities" size="small" :controls="false" style="width: 100%"
              placeholder="请输入 默认汇率" :disabled="detailData.status == 1"></el-input-number>
          </template>
          <template slot="standardMoney">
            <el-switch v-model="form.standardMoney" :active-value="1" :inactive-value="0"
              :disabled="detailData.status == 1">
            </el-switch>
          </template>
          <!-- <template slot="paritiesType">
            <avue-select v-model="form.paritiesType" placeholder="请选择汇率类型" :disabled="detailData.status == 1"
              :dic="typeData" @change="paritiesChange"></avue-select>
          </template> -->
          <template slot="annual">
            <avue-date v-model="form.annual" placeholder="请选择汇率年度" :disabled="detailData.status == 1" type="year"
              @change="annualChange" valueFormat="yyyy"></avue-date>
          </template>
          <template v-if="form.paritiesType == '日汇率'" slot="moon">
            <avue-select  v-model="form.moon" placeholder="请选择月份" :disabled="detailData.status == 1" :dic="MoonData"
              @change="MoonChange"></avue-select>
          </template>
          <template slot="button">
            <el-button v-if="form.code != 'CNY'" size="small" type="primary" @click="createExRate"
              :disabled="detailData.status == 1 || dataList.length != 0">产生汇率项目</el-button>
            <div v-else></div>
          </template>
        </avue-form>
      </basic-container>
      <containerTitle v-if="form.code != 'CNY'" title="基础明细"></containerTitle>
      <basic-container v-if="form.code != 'CNY'">
        <avue-crud ref="crud" v-model="crudForm" :option="optionList" id="out-table" :search.sync="search"
          :header-cell-class-name="headerClassName" :data="dataList" :table-loading="loading" :cell-style="cellStyle"
          @row-save="rowSave" @row-update="rowUpdate" @search-change="searchChange" @search-reset="resetChange"
          @selection-change="selectionChange">

          <template slot="menuLeft">
            <el-button type="danger" size="small" @click.stop="BatchDelete"
              :disabled="detailData.status == 1 || selectionList.length == 0">一键删除</el-button>
          </template>
          <template v-if="!row.$cellEdit" slot="menu" slot-scope="{row}">
            <el-button type="text" size="small" @click="editFun(row)">编辑
            </el-button>
            <el-button type="text" size="small" @click="rowDel(row)">删除
            </el-button>
          </template>
        </avue-crud>
      </basic-container>
    </div>
  </div>
</template>

<script>
import { typeSave, dataDetail, delItem, bcurexrateDetails, bcurexrateList } from "@/api/iosBasicData/rateManagement";
import { optionList } from "./js/optionList";
import reportDialog from "@/components/report-dialog/main";
export default {
  name: "detailsPage",
  data() {
    return {
      typeData: [
        {
          label: "年汇率",
          value: "年汇率"
        },
        {
          label: "月汇率",
          value: "月汇率"
        },
        {
          label: "日汇率",
          value: "日汇率"
        }
      ],
      MoonData: [
        {
          label: "一月",
          value: 1
        },
        {
          label: "二月",
          value: 2
        },
        {
          label: "三月",
          value: 3
        },
        {
          label: "四月",
          value: 4
        },
        {
          label: "五月",
          value: 5
        },
        {
          label: "六月",
          value: 6
        },
        {
          label: "七月",
          value: 7
        },
        {
          label: "八月",
          value: 8
        },
        {
          label: "九月",
          value: 9
        },
        {
          label: "十月",
          value: 10
        },
        {
          label: "十一月",
          value: 11
        },
        {
          label: "十二月",
          value: 12
        },
      ],
      time: "",
      search: {
        annual: '2024'
      },
      crudForm: {},
      loading: false,
      allloading: false,
      loadingBtn: false,
      form: {},
      dataList: [],
      drawer: false,
      tableHeight: 0,
      option: {
        menuBtn: false,
        labelWidth: 100,
        disabled: false,
        column: [
          {
            label: "货币代码",
            prop: "code",
            span: 6,
            rules: [{
              required: true,
              message: "请输入代码",
              trigger: "blur"
            }]
          },
          {
            label: "国际三字码",
            prop: "unCode",
            span: 6,
          },
          {
            label: "中文名称",
            prop: "cnName",
            span: 6,
            rules: [{
              required: true,
              message: "请输入中文名称",
              trigger: "blur"
            }]
          },
          {
            label: "英文名称",
            prop: "enName",
            span: 6,
            rules: [{
              required: true,
              message: "请输入英文名称",
              trigger: "blur"
            }]
          },
          {
            label: "货币符号",
            prop: "symbol",
            span: 6,
          },
          {
            label: "是否本币",
            prop: "isLocal",
            type: "select",
            span: 6,
            dicData: [{
              label: '非本币',
              value: 0
            }, {
              label: '本币',
              value: 1
            }],
            value: 0
          },
          {
            label: "对本币汇率",
            prop: "exrate",
            span: 6,
          },
          {
            label: "国家代码",
            prop: "cntyCode",
            span: 6
          },
          {
            label: "国家名称",
            prop: "cntyName",
            span: 6
          },
          {
            label: "汇率类型",
            prop: "paritiesType",
            type: "select",
            filterable: true,
            clearable: false,
            props: {
              label: "dictValue",
              value: "dictValue"
            },
            dicData: [
              {
                dictValue: "年汇率",
                dictKey: 0
              },
              {
                dictValue: "月汇率",
                dictKey: 1
              },
              {
                dictValue: "日汇率",
                dictKey: 2
              }
            ],
            span: 6,
          },
          {
            label: "汇率年度",
            prop: "annual",
            type: "year",
            valueFormat: "yyyy",
            span: 6,
          },
          {
            label: "月份",
            prop: "moon",
            span: 6,
            display: false,
          },
          {
            label: "状态",
            prop: "status",
            span: 6,
            type: "select",
            dicData: [{
              label: '启用',
              value: 0
            }, {
              label: '停用',
              value: 1
            }],
            value: 0
          },
          {
            label: "备注",
            prop: "remarks",
            type: 'textarea',
            width: "180",
            span: 24,
            minRows: 3,
            slot: true
          },
          {
            prop: "button",
            span: 6
          }

        ]
      },
      optionList: optionList,
      selectionList: [],
    };
  },
  props: {
    detailData: {
      type: Object
    }
  },
  components: {
    reportDialog
  },
  created() {
    this.$set(this.form, "standardMoney", 0);
    if (this.detailData.id) {
      this.getDetail(this.detailData.id);
    }
    if (this.detailData.status == 1) {
      this.$set(this.option, 'disabled', true)
    }
    this.optionList.height = 450;
  },
  methods: {
    selectionChange(list) {
      this.selectionList = list
    },
    // paritiesChange(row) {
    //   let obj = {
    //     current: 1,
    //     size: 20,
    //     type: row,
    //     code: this.form.code,
    //     exrateYear: this.form.annual,

    //   }
    //   if (row == "日汇率") {
    //     this.findObject(this.option.column, "moon").display = true;
    //     this.search.annual = this.form.annual
    //     this.search.moon = this.form.moon
    //     this.search.paritiesType = row
    //   } else if (row == "月汇率") {
    //     this.findObject(this.option.column, "moon").display = false;
    //     this.search.annual = this.form.annual
    //     this.search.moon = null
    //     this.form.moon=null
    //     this.search.paritiesType = row
    //   } else {
    //     this.findObject(this.option.column, "moon").display = false;
    //     this.search.annual = this.form.annual
    //     this.search.moon = null
    //     this.form.moon=null
    //     this.search.paritiesType = row
    //   }
    // },
    annualChange(row) {
      this.search.annual = row
      this.search.moon = this.form.moon
      this.search.paritiesType = this.form.paritiesType
      this.searchChange(this.search)
    },
    MoonChange(row) {
      this.search.annual = this.form.annual
      this.search.moon = row
      this.search.paritiesType = this.form.paritiesType
      this.searchChange(this.search)
    },
    searchChange(params, done) {
      // if (params.paritiesType == "日汇率") {
      //   this.findObject(this.option.column, "moon").display = true;
      //   // this.findObject(this.option.column, "annual").display = false;
      // } else {
      //   this.findObject(this.option.column, "moon").display = false;

      //   // this.findObject(this.option.column, "annual").display = true;
      // }
      let obj = {
        current: 1,
        size: 35,
        type: params.paritiesType,
        code: this.form.code,
        exrateYear: params.annual,
        exrateMonth: params.moon
      }
      bcurexrateList(obj).then(res => {
        this.dataList = res.data.data.records;
        done();
      })
    },
    resetChange() {

    },
    // 编辑明细
    editFun(row) {
      console.log(row, '编辑')
      this.$refs.crud.rowCell(row, row.$index)

    },
    // 编辑点击保存
    rowSave(row, done, loading) {
      done(row)
    },
    // 编辑点击保存
    rowUpdate(row, index, done, loading) {
      done(row);
    },
    // 批量删除
    BatchDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let arrId = this.selectionList.map(item => {
          return item.id
        })
        bcurexrateDetails(arrId.join(',')).then(res => {
          this.$message.success('操作成功')
          this.searchChange(this.search)
        })
      })
    },
    // 删除
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        bcurexrateDetails(row.id).then(res => {
          this.$message.success('操作成功')
          this.dataList.splice(row.$index, 1)
        })
      })
    },
    cellStyle() {
      return "padding:0;height:40px;";
    },
    // 详情
    getDetail(id) {
      this.allloading = true
      dataDetail(id)
        .then(res => {
          this.form = res.data.data
          this.form.annual = this.form.annual + ''
        })
        .finally(() => {
          this.allloading = false;
        });
    },
    //修改提交触发
    editCustomer() {
      this.$refs["form"].validate((valid, done) => {
        console.log(this.dataList);
        done();
        if (valid) {
          this.loadingBtn = true;
          if (this.form.id) {
            // delItem({ id: this.form.id }).then(res => {
            //   if (res.data.code == 200) {
            typeSave({
              ...this.form,
              curExrateList: this.dataList
            })
              .then(res => {
                this.$message.success("保存成功");
                this.getDetail(res.data.data.id);
              })
              .finally(() => {
                this.loadingBtn = false;
              });
            //   }
            // });
          } else {
            typeSave({
              ...this.form,
              curExrateList: this.dataList
            })
              .then(res => {
                this.$message.success("保存成功");
                this.getDetail(res.data.data.id);
              })
              .finally(() => {
                this.loadingBtn = false;
              });
          }
        } else {
          return false;
        }
      });
    },
    openEdit() {
      this.$set(this.detailData, 'status', 2)
      this.$set(this.option, 'disabled', false)
      // const data = {
      //   moduleName: "xxb",
      //   tableName: "primary_school",
      //   billId: this.form.id,
      //   no: localStorage.getItem("browserID"),
      //   billNo: this.form.exrateYear + "-" + this.form.moon
      // };
      // this.checkLock(data).then(res => {
      //   if (res.data.code == 200) {
      // 上锁接口
      //     this.onLock(data).then(re => {
      //       if (re.data.code == 200) {
      //           this.$set(this.detailData,'status',2)
      //           this.$set(this.option,'disabled',false)
      //         // this.option = this.$options.data().option;
      //       }
      //     });
      //   }
      // });
    },
    //返回列表
    backToList() {
      if (this.form.id) {
        this.unLock({
          moduleName: "xxb",
          tableName: "primary_school",
          billId: this.form.id,
          billNo: this.form.exrateYear + "-" + this.form.moon
        });
      }
      this.$emit("goBack");
      this.leaveDetailsKey(this.$route.name);
    },
    // 产生汇率项目
    createExRate() {
      this.$refs["form"].validate((valid, done) => {
        done();
        if (valid) {
          this.toggleForm();
          const loading = this.$loading({
            lock: true,
            text: '加载中',
            spinner: 'el-icon-loading',
            background: 'rgba(255,255,255,0.7)'
          });
          // 拿有id 的数据
          // let arrId = []
          // for (let item of  this.dataList) {
          //     if (item.id) {
          //         arrId.push(item.id)
          //     }
          // }
          // // 删除有ID的数据
          // bcurexrateDetails(arrId.join(',')).then(res=>{})
          this.dataList = [];
          if (this.form.paritiesType == "年汇率") {
            const loading = this.$loading({
              lock: true,
              text: '加载中',
              spinner: 'el-icon-loading',
              background: 'rgba(255,255,255,0.7)'
            });
            this.form.exrateMonth = "";
            const data = {
              exrateYear: this.form.annual,
              exrateReceivable: this.form.exrate,
              exratePayable: this.form.exrate,
              exrateReceipts: this.form.exrate,
              exratePayment: this.form.exrate,
              code: this.form.code,
              cnName: this.form.cnName,
              enName: this.form.enName,
              type: this.form.paritiesType
            };
            this.dataList.push(data);
            typeSave({
              ...this.form,
              curExrateList: this.dataList
            }).then(res => {
              this.$message.success("操作成功");
              this.getDetail(res.data.data.id);
            }).finally(() => {
              this.loadingBtn = false;
              loading.close();
            });
          } else if (this.form.paritiesType == "月汇率") {
            const loading = this.$loading({
              lock: true,
              text: '加载中',
              spinner: 'el-icon-loading',
              background: 'rgba(255,255,255,0.7)'
            });
            this.form.exrateMonth = "";
            for (let i = 1; i <= 12; i++) {
              const data = {
                exrateYear: this.form.annual,
                // exrateMonth: i + "月",
                exrateMonth: i,
                exrateReceivable: this.form.exrate,
                exratePayable: this.form.exrate,
                exrateReceipts: this.form.exrate,
                exratePayment: this.form.exrate,
                code: this.form.code,
                cnName: this.form.cnName,
                enName: this.form.enName,
                type: this.form.paritiesType
              };
              this.dataList.push(data);
            }
            typeSave({
              ...this.form,
              curExrateList: this.dataList
            }).then(res => {
              this.$message.success("操作成功");
              this.getDetail(res.data.data.id);
            }).finally(() => {
              this.loadingBtn = false;
              loading.close();
            });
          } else if (this.form.paritiesType == "日汇率") {
            const loading = this.$loading({
              lock: true,
              text: '加载中',
              spinner: 'el-icon-loading',
              background: 'rgba(255,255,255,0.7)'
            });
            const days = this.getCountDays(this.form.annual, this.form.moon);
            for (let i = 1; i <= days; i++) {
              const data = {
                exrateYear: this.form.annual,
                // exrateMonth: this.form.moon + "月",
                exrateMonth: this.form.moon,
                // exrateDay: i + "号",
                exrateDay: i,
                exrateReceivable: this.form.exrate,
                exratePayable: this.form.exrate,
                exrateReceipts: this.form.exrate,
                exratePayment: this.form.exrate,
                code: this.form.code,
                cnName: this.form.cnName,
                enName: this.form.enName,
              };
              this.dataList.push(data);
            }
            typeSave({
              ...this.form,
              curExrateList: this.dataList
            }).then(res => {
              this.$message.success("操作成功");
              this.getDetail(res.data.data.id);
            }).finally(() => {
              this.loadingBtn = false;
              loading.close();
            });
          }
        }
      });
    },
    // 获取一个月的天数
    getCountDays(curDate, month) {
      let date = new Date(curDate);
      date.setMonth(month);
      date.setDate(0);
      return date.getDate();
    },
    toggleForm() {
      if (this.form.paritiesType == "日汇率") {
        // this.findObject(this.optionList.column, "exrateDay").hide = false;
        this.findObject(this.optionList.column, "exrateMonth").hide = false;
      } else if (this.form.paritiesType == "月汇率") {
        // this.findObject(this.optionList.column, "exrateDay").hide = true;
        this.findObject(this.optionList.column, "exrateMonth").hide = false;
      } else {
        // this.findObject(this.optionList.column, "exrateDay").hide = true;
        this.findObject(this.optionList.column, "exrateMonth").hide = true;
      }
    },

    // 更改表格颜色
    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;
    },
  },
  watch: {
    "form.paritiesType": {
      // 执行方法
      handler(row, newValue) {
        let obj = {
          current: 1,
          size: 20,
          type: row,
          code: this.form.code,
          exrateYear: this.form.annual,

        }
        if (row == "日汇率") {
          this.findObject(this.option.column, "moon").display = true;
          this.search.annual = this.form.annual
          this.search.moon = this.form.moon
          this.search.paritiesType = row
          // this.searchChange(this.search)
          // console.log("日汇率", this.search)
          // this.findObject(this.option.column, "annual").display = false;
        } else if (row == "月汇率") {
          this.findObject(this.option.column, "moon").display = false;
          this.search.annual = this.form.annual
          this.search.moon = null
          this.form.moon=null
          this.search.paritiesType = row
          // this.searchChange(this.search)
          // console.log("月汇率", this.search)
          // this.findObject(this.option.column, "annual").display = false;
        } else {
          // this.findObject(this.option.column, "moon").display = false;
          this.search.annual = this.form.annual
          this.search.moon = null
          this.form.moon=null
          this.search.paritiesType = row
          // this.searchChange(this.search)
          // console.log("年汇率", this.search)
          // this.findObject(this.option.column, "annual").display = true;
        }

        if (this.form.code) {
          // 查明细信息
          obj={...obj,...this.search}
          this.searchChange(obj)
        }
      },
      deep: false, // 深度监听
      immediate: false  // 第一次改变就执行
    },
    // "form.annual": {
    //   // 执行方法
    //   handler(row, newValue) {
    //     this.search.annual = row
    //     this.search.moon = this.form.moon
    //     this.search.paritiesType = this.form.paritiesType
    //     this.searchChange(this.search)
    //   },
    //   deep: false, // 深度监听
    //   immediate: false  // 第一次改变就执行
    // },
    // "form.moon": {
    //   // 执行方法
    //   handler(row, newValue) {
    //     this.search.annual = this.form.annual
    //     this.search.moon = row
    //     this.search.paritiesType = this.form.paritiesType
    //     this.searchChange(this.search)
    //   },
    //   deep: false, // 深度监听
    //   immediate: false  // 第一次改变就执行
    // },
    "search.paritiesType": {
      handler(row, newValue) {

        if (row == "日汇率") {
          this.findObject(this.optionList.column, "moon").search = true;
          // this.findObject(this.option.column, "annual").display = false;
        } else {
          this.findObject(this.optionList.column, "moon").search = false;
          this.search.moon = ''
          // this.findObject(this.option.column, "annual").display = false;
        }
      },
      deep: false, // 深度监听
      immediate: false  // 第一次改变就执行
    }
  }
};
</script>


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

::v-deep .el-form-item__error {
  display: none !important;
}

.schoolupload ::v-deep .el-upload-list {
  display: none;
}

.abnormal ::v-deep .el-dialog__body {
  padding: 10px 20px;
}

::v-deep#out-table .back-one {
  background: #ecf5ff !important;
}

::v-deep#out-table .back-two {
  background: #ecf5ff !important;
}

.headerCellClass {
  color: #fff !important;
  background: #a4cf57 !important;
}
</style>