Infsea.vue

<template>
  <div class="eibs-tab">
    <c-col :span="24">
      <c-col :span="8">
        <el-form-item label="币种">
          <c-select v-model="model.cur" placeholder="请选择币种" dbCode="CURTXT" :isShowKeyAndLabel="true" sort="SRT"
            @change="changeCur()" />
        </el-form-item>
      </c-col>
      <c-col :span="8">
        <el-form-item label="月份" prop="dat" :rules="rules.dat">
          <el-date-picker v-model="model.dat" type="month" value-format="yyyy-MM" format="yyyy-MM" placeholder="选择月份" />
        </el-form-item>
      </c-col>
      <c-col :span="8" style="text-align: center">
        <el-button type="primary" icon="el-icon-search" size="small" :loading="searchLoading" @click="changeModel()">查询
        </el-button>
        <el-button size="small" icon="el-icon-refresh" @click="handleReset">重置</el-button>
        <el-tooltip effect="dark" content="双击日历格空白处可添加节假日,单击颜色按钮可删除节假日" placement="bottom">
          <el-button size="small" icon="el-icon-info">说明</el-button>
        </el-tooltip>
      </c-col>
    </c-col>

    <el-calendar v-model="value">
      <template slot="dateCell" slot-scope="{date, data}">
        <p style="width: 100%;height: 100%;padding: 8px;" @dblclick="addTdh(data)">
          <template v-if="tdhDataDateList.includes(data.day)">
            <div>
              {{ (data.day.split('-').slice(1).join('-')) }}
              <div class="btn-wrap">
                <div v-for="item in tdhDat" :key="item.inr" style="position: relative;">
                  <!-- CNY -->
                  <el-popover placement="top-start" title="节假日信息" width="200" trigger="hover"
                    v-if="item.cur.toUpperCase() == 'CNY' && item.dat == data.day">
                    <span style="display:block;color:#FF0000;">币种: CNY - 人民币</span>
                    <span style="display:block;color:#FF0000;">日期: {{item.dat}}</span>
                    <el-button slot="reference" style="width: 20px;height: 10px;background:#FF0000;margin-right:8px;"
                      @click="handleClick(item)" v-if="item.cur.toUpperCase() == 'CNY' && item.dat == data.day">
                    </el-button>
                  </el-popover>
                  <!-- USD -->
                  <el-popover placement="top-start" title="节假日信息" width="200" trigger="hover"
                    v-if="item.cur.toUpperCase() == 'USD' && item.dat == data.day">
                    <span style="display:block;color:#336699;">币种: USD - 美元</span>
                    <span style="display:block;color:#336699;">日期: {{item.dat}}</span>
                    <el-button slot="reference" style="width: 20px;height: 10px;background:#336699;margin-right:8px;"
                      @click="handleClick(item)" v-if="item.cur.toUpperCase() == 'USD' && item.dat == data.day">
                    </el-button>
                  </el-popover>
                  <!-- EUR -->
                  <el-popover placement="top-start" title="节假日信息" width="200" trigger="hover"
                    v-if="item.cur.toUpperCase() == 'EUR' && item.dat == data.day">
                    <span style="display:block;color:#f7ce31;">币种: EUR - 欧元</span>
                    <span style="display:block;color:#f7ce31;">日期: {{item.dat}}</span>
                    <el-button slot="reference" style="width: 20px;height: 10px;background:#f7ce31;margin-right:8px;"
                      @click="handleClick(item)" v-if="item.cur.toUpperCase() == 'EUR' && item.dat == data.day">
                    </el-button>
                  </el-popover>
                  <!-- GBP -->
                  <el-popover placement="top-start" title="节假日信息" width="200" trigger="hover"
                    v-if="item.cur.toUpperCase() == 'GBP' && item.dat == data.day">
                    <span style="display:block;color:#009966;">币种: GBP - 英镑</span>
                    <span style="display:block;color:#009966;">日期: {{item.dat}}</span>
                    <el-button slot="reference" style="width: 20px;height: 10px;background:#009966;margin-right:8px;"
                      @click="handleClick(item)" v-if="item.cur.toUpperCase() == 'GBP' && item.dat == data.day">
                    </el-button>
                  </el-popover>
                  <!-- JPY -->
                  <el-popover placement="top-start" title="节假日信息" width="200" trigger="hover"
                    v-if="item.cur.toUpperCase() == 'JPY' && item.dat == data.day">
                    <span style="display:block;color:#CCCCCC;">币种: JPY - 日元</span>
                    <span style="display:block;color:#CCCCCC;">日期: {{item.dat}}</span>
                    <el-button slot="reference" style="width: 20px;height: 10px;background:#CCCCCC;margin-right:8px;"
                      @click="handleClick(item)" v-if="item.cur.toUpperCase() == 'JPY' && item.dat == data.day">
                    </el-button>
                  </el-popover>
                  <!-- HKD -->
                  <el-popover placement="top-start" title="节假日信息" width="200" trigger="hover"
                    v-if="item.cur.toUpperCase() == 'HKD' && item.dat == data.day">
                    <span style="display:block;color:#FFC0CB;">币种: HKD - 港币</span>
                    <span style="display:block;color:#FFC0CB;">日期: {{item.dat}}</span>
                    <el-button slot="reference" style="width: 20px;height: 10px;background:#FFC0CB;margin-right:8px;"
                      @click="handleClick(item)" v-if="item.cur.toUpperCase() == 'HKD' && item.dat == data.day">
                    </el-button>
                  </el-popover>
                  <!-- other -->
                  <el-popover placement="top-start" title="节假日信息" width="200" trigger="hover"
                    v-if="commonCurList.indexOf(item.cur.toUpperCase()) == -1 && item.dat == data.day">
                    <span style="display:block;color:#161414;">币种: {{item.curname}}</span>
                    <span style="display:block;color:#161414;">日期: {{item.dat}}</span>
                    <el-button slot="reference" style="width: 20px;height: 10px;background:#161414;margin-right:8px;"
                      @click="handleClick(item)"
                      v-if="commonCurList.indexOf(item.cur.toUpperCase()) == -1 && item.dat == data.day">
                    </el-button>
                  </el-popover>
                </div>
              </div>
            </div>
          </template>
          <template v-else>
            {{ (data.day.split('-').slice(1).join('-')) }}
          </template>
        </p>
      </template>
    </el-calendar>
    <c-col :span="24">
      <c-col :span="20" style="margin-left:20px;margin-top:-20px;margin-bottom:20px;">
        <span style="display: inline-block;width: 20px;height: 13px;background: #FF0000;"></span>CNY-人民币
        <span
          style="display: inline-block;width: 20px;height: 13px;background: #336699; margin-left:12px;"></span>USD-美元
        <span
          style="display: inline-block;width: 20px;height: 13px;background: #f7ce31; margin-left:12px;"></span>EUR-欧元
        <span
          style="display: inline-block;width: 20px;height: 13px;background: #009966; margin-left:12px;"></span>GBP-英镑
        <span
          style="display: inline-block;width: 20px;height: 13px;background: #CCCCCC; margin-left:12px;"></span>JPY-日元
        <span
          style="display: inline-block;width: 20px;height: 13px;background: #FFC0CB; margin-left:12px;"></span>HKD-港币
        <span v-if="curNameSkipCommonCur != ''"
          style="display: inline-block;width: 20px;height: 13px;background: #161414; margin-left:12px;"></span>{{curNameSkipCommonCur}}
      </c-col>
    </c-col>
    <c-col :span="24">
      <c-col :span="24" style="text-align: center">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" ref="tdhInsertBtn" v-if="isShowPBtn"
          @click="dialog = true">节假日导入
        </el-button>
      </c-col>
    </c-col>
    <c-col :span="24">
      <c-paging-table :data="tdhTableData" :columns="tdhColumns" :pageNumber="model.pageNum" :pageSize="model.pageSize"
        :total="model.total" v-on:queryFunc="queryFunc" :border="true">
      </c-paging-table>
    </c-col>

    <c-col>
      <el-dialog title="节假日导入" :visible.sync="dialog" :close-on-click-modal="false" @close="cancel" center>
        <c-col :span="24">
          <c-col :span="24">
            <div class="upload-file">
              <el-upload action="/webapi/manager/tdh/upload" :accept="accept" :limit="1"
                :before-upload="handleBeforeUpload" :file-list="fileList" :on-exceed="handleExceed" :auto-upload="false"
                ref="uploadff">
                <!--上传按钮-->
                <el-button slot="trigger" size="mini" type="primary">选取文件</el-button>
                <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">确 认</el-button>
                <!--上传提示-->
                <div slot="tip" class="el-upload__tip">只能上传xlxs/xls文件，且不超过10M</div>
              </el-upload>
              <!-- 文件列表 -->
              <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear"
                tag="ul">
                <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content"
                  v-for="(file, index) in fileList">
                  <el-link :href="file.url" :underline="false" target="_blank">
                    <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
                  </el-link>
                  <div class="ele-upload-list__item-content-action">
                    <el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
                  </div>
                </li>
              </transition-group>
            </div>
          </c-col>
        </c-col>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="cancel">取 消</el-button>
        </span>
      </el-dialog>
    </c-col>
  </div>
</template>

<script>
  import codes from "~/config/CodeTable";
  import moment from 'moment';
  import commonFunctions from "~/mixin/commonFunctions.js";
  import Tdh, {
    Pattern
  } from "./Tdh.js";
  import {
    queryByPage,
    add,
    edit,
    deleteById,
    getCurName,
    queryAll,
    uploadfile
  } from "~/service/manage/tdh.js";

  export default {
    name: "",
    props: ["model"],
    inject: ["root"],
    mixins: [commonFunctions],
    data() {
      var checkCur = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请选择币种!'));
        } else {
          return callback();
        }
      };
      var checkDat = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请选择月份!'));
        } else {
          return callback();
        }
      };
      return {
        rules: {
          cur: [{
            required: true,
            validator: checkCur,
            trigger: 'change'
          }],
          dat: [{
            required: true,
            validator: checkDat,
            trigger: 'change'
          }]
        },
        tdhModel: {},
        tdhDat: [],
        value: new Date(),
        tdhTableData: [],
        tdhColumns: [{
            label: '币种',
            prop: 'curname',
            width: 'auto'
          },
          {
            label: '日期',
            prop: 'datStr',
            width: 'auto'
          }
        ],
        dialogFlg: false,
        form: new Tdh().data,
        // 已选择文件列表
        fileList: [],
        // 是否显示文件上传弹窗
        dialog: false,
        // 可上传的文件类型
        accept: '.xls,.xlsx',
        action: 'action',
        isShowPBtn: false,
        isEditBtn: false,
        searchLoading: false,
        currentSelectCurName: '',
        curNameSkipCommonCur: '',
        commonCurList: ['CNY', 'USD', 'EUR', 'GBP', 'JPY', 'HKD'],
      };
    },
    computed: {
      tdhDataDateList() {
        return this.tdhDat.map((item) => {
          return item.datStr
        })
      }
    },
    created() {
      this.model.dat = this.getNowDate()
      this.onSearch()
    },
    activated() {
      const {
        update
      } = this.$route.params
      if (update) {
        this.onDbltdhSearch()
      }
    },
    mounted() {
      this.$nextTick(() => {
        // 上个月
        let prevBtn = document.querySelector(
          ".el-calendar__button-group .el-button-group>button:nth-child(1)"
        );
        prevBtn.addEventListener("click", () => {
          this.model.dat = moment(this.value).format("yyyy-MM");
          this.onSearch();
        });
        // 今天
        let dayBtn = document.querySelector(
          ".el-calendar__button-group .el-button-group>button:nth-child(2)"
        );
        dayBtn.addEventListener("click", () => {
          this.model.dat = moment(this.value).format("yyyy-MM");
          this.onSearch();
        });
        // 下个月
        let nextBtn = document.querySelector(
          ".el-calendar__button-group .el-button-group>button:nth-child(3)"
        );
        nextBtn.addEventListener("click", () => {
          this.model.dat = moment(this.value).format("yyyy-MM");
          this.onSearch();
        });
      });
      this.getHiddenButtonVue();
    },
    methods: {
      // 获取当前选择的币种名称
      changeCur() {
        var temp = new Tdh().data;
        if (this.model.cur != '') {
          temp.cur = this.model.cur;
          getCurName(temp).then((res) => {
            this.currentSelectCurName = res.data;
            if (this.commonCurList.indexOf(this.model.cur) == -1) {
              this.curNameSkipCommonCur = res.data;
            } else {
              this.curNameSkipCommonCur = '';
            }
          });
        } else {
          this.currentSelectCurName = '';
          this.curNameSkipCommonCur = '';
        }
      },
      getNowDate() {
        const timeOne = new Date()
        const year = timeOne.getFullYear()
        let month = timeOne.getMonth() + 1
        month = month < 10 ? '0' + month : month
        const NOW_MONTHS = `${year}-${month}`
        return NOW_MONTHS
      },
      getHiddenButtonVue() {
        this.$buttonControlService.hiddenBtnList()
          .then((res) => {
            //节假日倒入
            let hasInsert = res.some((item) => {
              return item.ITEMID === 'tdhInsertBtn';
            })
            if (hasInsert) {
              this.isShowPBtn = false;
            } else {
              this.isShowPBtn = true;
            }

            //界面编辑
            let hasEdit = res.some((item) => {
              return item.ITEMID === 'tdhEditBtn';
            })
            if (hasEdit) {
              this.isEditBtn = false;
            } else {
              this.isEditBtn = true;
            }
          })
      },
      // 【查询】按钮
      changeModel() {
        this.value = this.model.dat;
        this.onSearch();
      },
      getCodesByKey(key) {
        return codes[key] || [];
      },
      // 【重置】按钮
      handleReset() {
        this.model.cur = '';
        this.model.dat = '';
        this.currentSelectCurName = '';
        this.curNameSkipCommonCur = '';
      },
      // 列表分页查询
      queryFunc(pageNumber, pageSize) {
        this.model.pageNum = pageNumber
        this.model.pageSize = pageSize
        this.onDbltdhSearch()
      },
      // 查询操作
      onSearch() {
        this.model.pageSize = PageSize;
        this.model.pageNum = 1;
        this.onDbltdhSearch();
      },
      // 【列表节假日查询】和【日历节假日】查询
      onDbltdhSearch() {
        delete this.model.modifySet;
        if (this.model.dat == null || this.model.dat == '') {
          this.$notify.error("月份不能为空!");
          return;
        }
        const loading = this.loading();
        this.searchLoading = true;
        // 列表节假日查询
        queryByPage(this.model).then(res => {
          if (res.respCode == SUCCESS) {
            this.tdhTableData = res.data.list
            this.model.pageNum = res.data.pageNumber
            this.model.pageSize = res.data.pageSize
            this.model.total = res.data.total
            this.queryCalendar();
            loading.close();
          }
        })
      },
      // 日历节假日查询
      queryCalendar() {
        this.tdhModel.cur = this.model.cur
        this.tdhModel.dat = this.model.dat
        queryAll(this.tdhModel).then(res => {
          if (res.respCode == SUCCESS) {
            this.tdhDat = res.data;
            this.searchLoading = false;
          } else {
            this.searchLoading = false;
          }
        }).catch((err) => {
          this.searchLoading = false;
          this.$notify.error("节假日查询失败!");
        });
      },
      // 【按钮点击事件，删除节假日】
      handleClick(itemValue) {
        if (!this.isEditBtn) {
          // 无权限操作
          this.$notify.error("抱歉,您没有该权限!");
          return;
        }
        this.$confirm("是否删除【" + itemValue.curname + "】的节假日?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          let params = {
            inr: itemValue.inr
          }
          deleteById(params).then((res) => {
              this.$notify.success("删除成功！");
              this.onSearch()
            })
            .catch((err) => {
              this.$notify.error("修改失败！");
            });
        }).catch(() => {
          this.$message({
            type: "info",
            message: "取消删除",
          });
        });
      },
      // 新增节假日信息
      addTdh(currentCellData) {
        if (!this.isEditBtn) {
          // 无权限操作
          this.$notify.error("抱歉,您没有该权限!");
          return;
        }
        if (this.model.cur == '') {
          this.$notify.error("请先选择对应币种!");
          return;
        }
        var temp = new Tdh().data;
        temp.cur = this.model.cur;
        this.$confirm("是否新增【" + this.currentSelectCurName + "】节假日?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            this.form = new Tdh().data;
            this.form.cur = this.model.cur;
            this.form.dat = currentCellData.day;
            add(this.form)
              .then((res) => {
                if (res.respCode == SUCCESS) {
                  this.$notify.success("新增节假日成功!");
                  this.onDbltdhSearch();
                } else {
                  this.$notify.error(res.respMsg);
                }
              })
              .catch((err) => {
                this.$notify.error("新增节假日失败!");
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消修改",
            });
          });
      },

      // 文件个数超出
      handleExceed() {
        this.$notify.error(`只允许上传1个文件`);
      },
      // 上传前校检大小
      handleBeforeUpload(file) {
        // 校检文件大小
        const isLt = file.size / 1024 / 1024 < 10;
        if (!isLt) {
          this.$notify.error(`上传文件大小不能超过 10 MB!`);
          return false;
        }
        return true;
      },
      // 删除文件
      handleDelete(index) {
        this.fileList.splice(index, 1);
      },
      // 获取文件名称
      getFileName(name) {
        if (name.lastIndexOf("/") > -1) {
          return name.slice(name.lastIndexOf("/") + 1).toLowerCase();
        } else {
          return "";
        }
      },
      /** 手动提交上传 */
      submitUpload() {
        this.$refs.uploadff.submit()
        this.cancel()
      },
      /** 关闭上传弹框 */
      cancel() {
        this.fileList = [];
        this.dialog = false;
        this.onSearch();
      }
    },
  };
</script>

<style scoped lang="less">
  .table-button-item-list {
    padding: 0;
    margin: 0;
  }

  .table-button-item-list li {
    list-style: none;
    padding: 5px 0;
    text-align: center;
    color: #606266;
    cursor: pointer;
  }

  ::v-deep .el-calendar-day {
		height: 60px;
    padding: 0;
	}
	::v-deep .el-calendar__header {
		padding: 6px 20px;
	}
	::v-deep .el-calendar__body {
		padding: 6px 20px 35px;
	}
	::v-deep .el-calendar-table thead th {
		padding: 6px 0;
	}
	::v-deep .el-form-item {
		margin-bottom: 10px;
	}
	::v-deep .poin-skin .el-table th {
		line-height: 32px;
	}
  .is-selected {
    background: #fffdd0;
    color: orange;
  }

  .hidePoper {
    display: none
  }

  .btn-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
		margin-top: -2px;
		flex-wrap: wrap;
  }
</style>