index.vue

<template>
  <div class="app-container">

    <!-- 搜索工作栏 -->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item :label="$t('币种1')" prop="sourceCurrencyId">
        <el-select v-model="query.sourceCurrencyId" :placeholder="$t('请选择币种')" clearable size="small">
          <el-option   v-for="dict in currencyList"
                     :key="dict.id" :label="$l(dict,'title') + dict.fuhao" :value="dict.id" />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('币种2')" prop="targetCurrencyId">
        <el-select v-model="query.targetCurrencyId" :placeholder="$t('请选择币种')" clearable size="small">
          <el-option   v-for="dict in currencyList"
                     :key="dict.id" :label="$l(dict,'title') + dict.fuhao" :value="dict.id" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">{{$t('搜索')}}</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">{{$t('重置')}}</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作工具栏 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary"  v-hasPermi="['ecw:exchange-rate:create']" plain icon="el-icon-plus" size="mini" @click="handleAdd">{{$t('新增')}}</el-button>
      </el-col>
<!--      <el-col :span="1.5">-->
<!--        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"-->
<!--                   v-hasPermi="['ecw:exchange-rate:export']">导出</el-button>-->
<!--      </el-col>-->
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <!-- 列表 -->
    <el-table v-loading="loading" :data="list">
      <el-table-column  :label="$t('序号')" align="center" >
        <template v-slot="{row, $index}">
           {{(queryParams.page - 1) * queryParams.rows + ($index + 1)}}
        </template>
      </el-table-column>
      <el-table-column :label="$t('币种1')" align="center" prop="sourceCurrencyId">
        <template slot-scope="scope">
           {{getCurrency(scope.row.sourceCurrencyId)}}
        </template>
      </el-table-column>
       <el-table-column :label="$t('币种2')">
         <template v-slot="{row}">
           {{getCurrency(row.targetCurrencyId)}}
         </template>
       </el-table-column>
       <el-table-column :label="$t('币种1 金额')">
         <template v-slot="{row}">
           1 {{getCurrency(row.sourceCurrencyId, true)}}
         </template>
       </el-table-column>
       <el-table-column :label="$t('币种1金额兑换币种2汇率')" prop="currencyRate"></el-table-column>
       <el-table-column :label="$t('币种2金额')">
         <template v-slot="{row}">
            {{1 * row.currencyRate}}{{getCurrency(row.targetCurrencyId, true)}}
         </template>
       </el-table-column>
       <el-table-column :label="$t('最后修改时间')">
         <template v-slot="{row}">
           {{parseTime(row.updateTime)}}
         </template>
       </el-table-column>
       <el-table-column :label="$t('最后修改人')">
         <template v-slot="{row}">
        {{getOperator(row.updater)}}
         </template>
       </el-table-column>
      <el-table-column label="有效期" v-slot="{row}" >
        {{parseTime(row.expireDate)}}
      </el-table-column>
      <el-table-column label="状态" v-slot="{row}" >
        <span v-if="new Date(row.expireDate).getTime() >= new Date().getTime()">正常</span>
        <span v-else style="color: red" >已过期</span>
      </el-table-column>
       <el-table-column :label="$t('备注')" prop="note"></el-table-column>
      <el-table-column :label="$t('操作')" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-hasPermi="['ecw:exchange-rate:update']" size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">{{$t('修改')}}</el-button>
          <el-button v-hasPermi="['ecw:exchange-rate:delete']" size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">{{$t('删除')}}</el-button>
          <el-button v-hasPermi="['ecw:exchange-rate:log']" size="mini" type="text"  @click="formLog.rows = 10;formLog.page=1; handleLog(scope.row)">{{$t('日志')}}</el-button>

        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.rows"
                @pagination="getList"/>

    <!-- 对话框(添加 / 修改) -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item :label="$t('币种1')" prop="sourceCurrencyId">
          <el-select  v-model="form.sourceCurrencyId"  :placeholder="$t('请选择币种')">
            <el-option  :disabled="dict.status === 1 || form.targetCurrencyId === dict.id" @click.native="() => form.sourceCurrencyCode = dict.fuhao"   v-for="dict in currencyList"
                       :key="dict.id" :label="$l(dict,'title') + dict.fuhao" :value="dict.id" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('币种2')" prop="targetCurrencyId">
          <el-select v-model="form.targetCurrencyId" :placeholder="$t('请选择币种')">
            <el-option  :disabled="dict.status === 1 || form.sourceCurrencyId === dict.id"  @click.native="() => form.targetCurrencyCode = dict.fuhao" v-for="dict in currencyList"
                       :key="dict.id" :label="$l(dict,'title') + dict.fuhao" :value="dict.id" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('汇率')" prop="currencyRate">
          <el-input-number  class="el-input-number" :controls="false" v-model="form.currencyRate" :placeholder="$t('请输入汇率')" />
          <p v-if="form.sourceCurrencyId &&  form.currencyRate && form.targetCurrencyCode"  style="margin: 0;">
            {{$t('例子：')}}1{{getCurrency(form.sourceCurrencyId, true)}} = {{ 1 * form.currencyRate}}  {{getCurrency(form.targetCurrencyId, true)}}
          </p>
          <p v-else style="margin: 0;">
            {{$t('例子：1RMB = 0.138611USD')}}
          </p>
        </el-form-item>
        <el-form-item :label="$t('有效期')" prop="expireDate">
          <el-date-picker v-model="form.expireDate" type="datetime" format="yyyy-MM-dd HH:mm:ss"  value-format="yyyy-MM-dd HH:mm:ss"  ></el-date-picker>
        </el-form-item>
        <el-form-item v-if="form.id" :label="$t('状态')">
          <div> {{status ? '已过期' : '正常'}}</div>
        </el-form-item>
        <el-form-item :label="$t('备注')">
        <el-input type="textarea" v-model="form.note"></el-input>
        </el-form-item>
         <template v-if="form.id">
           <el-form-item :label="$t('创建人')">{{form.creatorName}}</el-form-item>
           <el-form-item :label="$t('创建时间')">{{parseTime(form.createTime)}}</el-form-item>
           <el-form-item :label="$t('最后更新时间')">{{parseTime(form.updateTime)}}</el-form-item>
           <el-form-item :label="$t('最后更新人')">{{getOperator(form.updater)}}</el-form-item>
         </template>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">{{$t('确 定')}}</el-button>
        <el-button @click="cancel">{{$t('取 消')}}</el-button>
      </div>
    </el-dialog>
     <el-dialog :visible.sync="openLog" >
         <el-table :data="listLog">
           <el-table-column :label="$t('修改人')" prop="changeName"></el-table-column>
           <el-table-column :label="$t('修改时间')">
             <template v-slot="{row}">
                {{parseTime(row.createTime)}}
             </template>
           </el-table-column>
           <el-table-column :label="$t('修改前内容')">
             <template v-slot="{row}">
                {{$t('币种1：')}}【{{ getCurrencyLog(row.beforeChangeSourceValue, 'fuhao')}}】<br/>
                {{$t('币种2：')}}【{{getCurrencyLog(row.beforeChangeTargetValue, 'fuhao')}}】<br/>
                {{$t('汇率：')}}【{{row.beforeChangeValue}}】<br/>
             </template>
           </el-table-column>
         </el-table>
       <pagination v-show="totalLog > 0" :total="totalLog" :page.sync="formLog.page" :limit.sync="formLog.rows"
                   @pagination="getListLog"/>
     </el-dialog>
  </div>
</template>

<script>
import {
  createExchangeRate,
  updateExchangeRate,
  deleteExchangeRate,
  getExchangeRate,
  getExchangeRatePage,
  exportExchangeRateExcel,
  getExchangeRateLogList
} from "@/api/ecw/exchangeRate";
import {getCurrencyPage} from "@/api/ecw/currency";
import {listAllSimpl} from "@/api/system/user";
import Template from "@/views/cms/template/index.vue";

export default {
  name: "ExchangeRate",
  components: {
    Template
  },
  watch:{
    'query.targetCurrencyId'(val){
      if(!val){
        this.queryParams.targetCurrencyId = undefined
      }

    },
     'query.sourceCurrencyId'(val){
      if(!val){
        this.queryParams.sourceCurrencyId = undefined
      }
     }
  },
  data() {
    return {
      status:0,
      currencyList:[],
      allSimplList:[],
      listLog:[],
      openLog:false,
      // 遮罩层
      loading:false,
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 汇率管理列表
      list: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      dateRangeCreateTime: [],
      // 查询参数
      queryParams: {
        page: 1,
        rows: 10,
        sourceCurrencyId: null,
        targetCurrencyId: null,
      },
      query:{
        sourceCurrencyId:null,
        targetCurrencyId:null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        sourceCurrencyId: [{ required: true, message: this.$t('币种1不能为空'), trigger: "change" }],
        sourceCurrencyCode: [{ required: true, message: this.$t('原币种代码不能为空'), trigger: "blur" }],
        targetCurrencyId: [{ required: true, message: this.$t('币种2不能为空'), trigger: "change" }],
        targetCurrencyCode: [{ required: true, message: this.$t('目标种代码不能为空'), trigger: "blur" }],
        currencyRate: [{ required: true, message: this.$t('汇率不能为空'), trigger: "blur" }],
        expireDate: [{ required: true, message: this.$t('有效期不能为空'), trigger: "blur" }],
      },
      formLog:{
        rows:10,
        page:1
      },
      totalLog: 0,
    };
  },
  created() {
    listAllSimpl().then(r => {
      this.allSimplList = r.data
    })
    getCurrencyPage({ pageNo: 1, pageSize: 1000,}).then(res => this.currencyList = res.data.list)
    this.getList();
  },
  methods: {
    change(val){
      console.log(val,'val')
    },
    handleLog(row){
      this.openLog = true;
      this.formLog.rateId = row.id
      this.getListLog()
    },
    getListLog(){
      getExchangeRateLogList(this.formLog).then(r => {
        this.listLog = r.data.list;
        this.totalLog = r.data.total;
      })
    },

    getOperator(val){
      if (val){
       let n = this.allSimplList.find(i => i.id == val)
        return n?.nickname
      }
      return ''
    },
    getCurrency(val, isEn = false , value = 'id'){
      if (val){
       let r =  this.currencyList.find(i => i[value] === val)
        if(isEn){
          return r?.titleEn
        }else {
          return  r?.titleZh +   `(${r?.titleEn})`
        }

      }
      return ''
    },
    getCurrencyLog(val, value = 'fuhao'){
      if (val){
       let r =  this.currencyList.find(i => i[value] === val)

        return this.$l(r,'title')
      }
      return ''
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      // 处理查询参数
      let params = {...this.queryParams};
      // 执行查询
      getExchangeRatePage(params).then(response => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    /** 取消按钮 */
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 表单重置 */
    reset() {
      this.form = {
        "currencyRate": "",
        "note": "",
        "sourceCurrencyCode": "",
        "sourceCurrencyId":'' ,
        "targetCurrencyCode": "",
        "targetCurrencyId": '',
        id: null,
        expireDate:""
      };
      this.resetForm("form");
    },
    secondarySelection(){
      this.queryParams.targetCurrencyId = this.query.targetCurrencyId
      this.queryParams.sourceCurrencyId = this.query.sourceCurrencyId
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1;
     this.secondarySelection()
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      // this.dateRangeCreateTime = [];
      // this.resetForm("queryForm");
      // this.handleQuery();
      this.query.targetCurrencyId = undefined
      this.query.sourceCurrencyId = undefined
      this.secondarySelection() //清空选中目标
      this.getList();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = this.$t('新增');
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id;
      getExchangeRate(id).then(response => {
        this.form = {...this.form,...response.data};
        this.form.expireDate = this.parseTime(this.form.expireDate);

        if(this.form.expireDate){
          if(new Date(this.form.expireDate).getTime() >= new Date().getTime()){
            this.status = 0
          }else {
            this.status = 1
          }
        }else {
          this.status = 1
        }
        this.open = true;
        this.title = this.$t('修改');
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (!valid) {
          return;
        }
        // 修改的提交
        if (this.form.id != null) {
          let p = {
            currencyRate: Number(this.form.currencyRate),
            id: this.form.id,
            note: this.form.note,
            sourceCurrencyCode: this.form.sourceCurrencyCode,
            sourceCurrencyId: this.form.sourceCurrencyId ,
            targetCurrencyCode:  this.form.targetCurrencyCode,
            targetCurrencyId:  this.form.targetCurrencyId,
            expireDate:this.form.expireDate

          }
          updateExchangeRate(p).then(response => {
            this.$modal.msgSuccess(this.$t('修改成功'));
            this.open = false;
            this.getList();
          });
          return;
        }
        // 添加的提交
        createExchangeRate(this.form).then(response => {
          this.$modal.msgSuccess(this.$t('新增成功'));
          this.open = false;
          this.getList();
        });
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const id = row.id;
      this.$modal.confirm(this.$t('是否确认删除汇率管理编号为"') + id + this.$t('"的数据项?')).then(function() {
          return deleteExchangeRate(id);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess(this.$t('删除成功'));
        }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      // 处理查询参数
      let params = {...this.queryParams};
      params.page = undefined;
      params.rows = undefined;
      this.addBeginAndEndTime(params, this.dateRangeCreateTime, 'createTime');
      // 执行导出
      this.$modal.confirm(this.$t('是否确认导出所有汇率管理数据项?')).then(() => {
          this.exportLoading = true;
          return exportExchangeRateExcel(params);
        }).then(response => {
          // this.$download.excel(response, '${table.classComment}.xls');
          this.exportLoading = false;
        }).catch(() => {});
    }
  }
};
</script>
<style lang="scss" scoped>
 ::v-deep.el-input-number{
    .el-input__inner{
      text-align: left;
    }
 }
</style>