模板管理界面添加，样式修改

Surpriseplus

2023-02-10 03e5e6dbf617b3557936b7ba80c625beea7f48af

模板管理界面添加，样式修改

 src/api/api.js

@@ -787,8 +787,26 @@
export function pipeline_downloadReq(params) {
  return request.post('/pipeline/downloadReq', params);
}


//模板管理=>分页查询
export function report_selectByPageAndCount(params) {
  return request.get('/report/selectByPageAndCount', { params: params });
}
//模板管理=>上传文件
export function report_upload(params) {
  return request.post('/report/upload', params);
}
//模板管理=>删除多条数据
export function report_deletes(params) {
  return request.get('/report/deletes',{ params: params });
}
//模板管理=>插入一条数据
export function report_insert(params) {
  return request.post('/report/insert', params);
}
//模板管理=>修改一条数据
export function report_update(params) {
  return request.post('/report/update', params);
}


//请求站场点内容

 src/assets/css/config.css

@@ -226,16 +226,26 @@
    background: #303030;
}

.Black_theme .contLable {
    color: white;
}

 .Black_theme .contLable{
.Black_theme .elLink {
    color: white;
 }
 .Black_theme .elLink{
}

.Black_theme .el-icon-folder-opened {
    color: white;
 }
 .Black_theme .el-icon-folder-opened{
}

.Black_theme .el-link.el-link--default {
    color: white;
 }
 .Black_theme .el-link.el-link--default{
    color: white;
 }
}

.Black_theme .el-card {
    background-color: #303030;
    color: #FFF;
}
.Black_theme .contentBox{
    color: #FFF;
}

 src/assets/css/configure.css

@@ -69,4 +69,8 @@

.el-tabs__content {
    overflow: revert;
}

.el-dialog__wrapper {
    z-index: 999;
}

 src/assets/lang/en.js

@@ -1,5 +1,7 @@
const en = {
  common: {
    bak:'Bak',
    domCode: 'DomCode',
    confirm: 'confirm',
    choose: 'Please choose',
    name: 'name',
@@ -39,6 +41,7 @@
    size: 'size',
    versionName: 'version Name',
    type: 'type',
    fileType:'File Type',
    quayTest: 'Auality testing',
    md5: 'MD5 Code',
    lineNuber: 'line Nuber',
@@ -177,6 +180,7 @@
      orderid: 'orderid',
    },
    styleManage: 'Style Manage',
    templateManage: 'Template management',
    styleObj: {
      index: 'Index',
      name: 'Name',

 src/assets/lang/zh.js

@@ -1,5 +1,7 @@
const zh = {
  common: {
    bak:'备注',
    domCode: '编码',
    confirm: '确认',
    choose: '请选择',
    name: '名称',
@@ -39,6 +41,7 @@
    size: '大小',
    versionName: '版本名称',
    type: '类型',
    fileType:'文件类型',
    quayTest: '质检',
    md5: 'MD5码',
    lineNuber: '行数',
@@ -175,6 +178,7 @@
      orderid: '序号',
    },
    styleManage: '样式管理',
    templateManage: '模板管理',
    styleObj: {
      index: '序号',
      name: '名称',
@@ -422,7 +426,7 @@
    export: '导出',
    pipelineAnalysis: '管道分析',
    synthesis: '综合展示',
    DownloadList:'下载列表',
    DownloadList: '下载列表',
    dataApplication: '数据申请',
    sceneExtraction: '场景提取',
    themaic: '专题地图',

 src/router/index.js

@@ -36,6 +36,7 @@
import addStyle from '../views/datamanage/addStyle.vue'; //数据管理-样式管理-添加样式
import ExportMap from '../views/exportMap/index.vue'; //在线制图
import userInfoManage from '../views/userManage/userInfoManage.vue'; // ç”¨æˆ·ç®¡ç†æ¨¡å—
import templateManage from '../views/userManage/templateManage.vue'; // æ¨¡æ¿ç®¡ç†
import orgManage from '../views/userManage/orgManage.vue'; // ç”¨æˆ·ç®¡ç†æ¨¡å—
import userAuditing from '../views/userManage/userAuditing.vue'; // ç”¨æˆ·ç®¡ç†æ¨¡å—
import roleManage from '../views/userManage/roleManage.vue'; // ç”¨æˆ·ç®¡ç†æ¨¡å—
@@ -363,6 +364,15 @@
        },
      },
      {
        path: '/templateManage',
        component: templateManage,
        name: 'templateManage',
        meta: {
          title: '模板管理',
          requireAuth: true, // æ ‡è¯†è¯¥è·¯ç”±æ˜¯å¦éœ€è¦ç™»å½•
        },
      },
      {
        path: '/orgManage',
        component: orgManage,
        name: 'orgManage',

 src/views/Archive/index.vue

@@ -1,41 +1,44 @@
<template>
  <div class="archive box_div">
  <div
    class="archive box_div"
    v-loading="loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div class="top_header">
      <div class="top_left">
        <My-bread :list="[`${$t('synthesis.synthesis')}`, `${$t('synthesis.archive')}`]"></My-bread>
      </div>

    </div>
    <div class="box_item ">
   
        <div class="box_left">资料类别</div>
        <div class="box_cont">

          <div v-if="isShowFirstCheck">
            <el-checkbox-group v-model="checkedDataType">
              <el-checkbox
                @change="handleCheckedDataTypeChange(item)"
                v-for="(item, index)  in showList"
                :label="item.name"
                :key="index"
              >{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </div>
          <div
            v-if="!isShowFirstCheck"
            class="menu_div"
            v-for="(item, index) in showList"
            :key="index"
            @click="changeListDataType(item)"
          >
      <div class="box_left">资料类别</div>
      <div class="box_cont">

            <div
              :class="{menuActive:dataTypeName == item.name}"
              style="margin-left: 5px"
            >{{ item.name }}</div>
          </div>
        <div v-if="isShowFirstCheck">
          <el-checkbox-group v-model="checkedDataType">
            <el-checkbox
              @change="handleCheckedDataTypeChange(item)"
              v-for="(item, index)  in showList"
              :label="item.name"
              :key="index"
            >{{item.name}}</el-checkbox>
          </el-checkbox-group>
        </div>
       
        <div
          v-if="!isShowFirstCheck"
          class="menu_div"
          v-for="(item, index) in showList"
          :key="index"
          @click="changeListDataType(item)"
        >

          <div
            :class="{menuActive:dataTypeName == item.name}"
            style="margin-left: 5px"
          >{{ item.name }}</div>
        </div>
      </div>

      <div class="box_right">
        <div
          class="menu_div subpage_Div"
@@ -265,14 +268,16 @@
      :title="dialogtitle"
      :visible.sync="dialogVisible"
      width="90%"
      top="5vh"
      top="10vh"
      :modal="false"
      style="z-index:999"
      :before-close="handleClose"
    >
      <!-- æ¡ä»¶-->
      <el-dialog
        width="37%"
        :visible.sync="conditionVisible"
        append-to-body
        :modal="false"
        title="查询条件"
        :before-close="handleconditionClose"
      >
@@ -283,6 +288,7 @@
        >
          <el-form-item>
            <el-select
              :popper-append-to-body="false"
              @change="fieldChange($event)"
              v-model="formSql.field"
            >
@@ -296,7 +302,10 @@
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="formSql.condition">
            <el-select
              :popper-append-to-body="false"
              v-model="formSql.condition"
            >
              <el-option
                v-for="item in condOption"
                :key="item.value"
@@ -334,7 +343,6 @@
      <el-dialog
        width="30%"
        :visible.sync="innerVisible"
        append-to-body
      >
        <div class="contentBox">
          <ul>
@@ -352,7 +360,7 @@
      <el-dialog
        width="30%"
        :visible.sync="outerVisible"
        append-to-body
        :modal="false"
      >
        <el-form
          :model="fromfile"
@@ -427,7 +435,7 @@

            </el-table>
          </el-form-item>
          <el-form-item>
          <!-- <el-form-item>

            <el-row :gutter="20">
              <el-col
@@ -444,6 +452,56 @@
                >取消</el-button>
              </el-col>
            </el-row>
          </el-form-item> -->
        </el-form>
      </el-dialog>
      <el-dialog
        :title="$t('common.passworld')"
        :visible.sync="downloadLogVisible"
        width="30%"
        top="10vh"
        :modal="false"
        :show-close="false"
        :before-close="handleCloseDown"
      >
        <el-form
          :model="codeForm"
          :rules="rules"
          ref="codeForm"
          label-width="100px"
          class="codeForm"
        >
          <el-form-item
            :label="$t('common.passworld')"
            prop="password"
          >
            <el-input
              type="password"
              v-model="codeForm.password"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('common.SPassword')"
            prop="repassword"
          >
            <el-input
              type="password"
              v-model="codeForm.repassword"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              class="primary"
              size="small"
              @click="download1('codeForm')"
            >{{$t('common.confirm')}}</el-button>
            <el-button
              type="info"
              size="small"
              @click="closeDown1('codeForm')"
            >{{$t('common.cancel')}}</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
@@ -487,6 +545,13 @@
              icon="el-icon-search"
            >{{$t('common.reset')}}</el-button>
          </el-form-item>
          <el-form-item>
            <el-button
              type="info"
              @click="downloadForm()"
              icon="el-icon-download"
            >{{$t('common.download')}}</el-button>
          </el-form-item>
        </el-form>
        <el-divider class="eldivider" />
        <div style="width:100%;height:400px;">
@@ -520,7 +585,7 @@
            ></el-table-column>
            <el-table-column
              v-if="isMenuActive"
              min-width="80"
              min-width="120"
              align="center"
              :label="$t('common.operate')"
            >
@@ -874,6 +939,8 @@
      }
    };
    return {
      loading: false,
      downloadLogVisible: false,
      downloadListVisible: false,
      data_type: [],
      project_name: [],
@@ -1025,12 +1092,67 @@
    },
  },
  methods: {
    downloadMap(index, rows) {
      //     var token = '?token=' + getToken();
      //   
      //  var url = BASE_URL + '/dataLib/downloadFile' + token + '&guid=' + rows.guid+ '&pwd='+  rows.pwd 
      var token = getToken()
    handleCloseDown() {

    },
    download1() {
      if (this.codeForm.password == '' || this.codeForm.repassword == '') {
        return this.$message.error('密码不能为空');
      }
      if (this.codeForm.password != this.codeForm.repassword) {
        return;
      }
      var passwordreg =
        /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W!@#$%^&*`~()\\-_+=,.?;<>]+$)(?![a-z0-9]+$)(?![a-z\W!@#$%^&*`~()\\-_+=,.?;<>]+$)(?![0-9\W!@#$%^&*`~()\\-_+=,.?;<>]+$)[a-zA-Z0-9\W!@#$%^&*`~()\\-_+=,.?;<>]{12,20}$/;
      if (!passwordreg.test(this.codeForm.password)) {
        return;
      }
      this.downloadLogVisible = false;
      var obj = {
        entities: [this.listTypeData.name], // bpachydrogeology,bhydrogeologyattach
        filter: this.listTypeData.filter,
        pwd: encrypt.encrypt(this.codeForm.password)
      };
      this.loading = true;
      var that = this;
      $.ajax({
        url: BASE_URL + "/dataLib/downloadEntityReq?token=" + getToken(),
        type: "POST",
        data: JSON.stringify(obj),
        dataType: 'json', // html、json、jsonp、script、text
        contentType: "application/json", // "application/x-www-form-urlencoded"
        success: (data) => {
          if (data.code == 200) {
            that.downloadflie(data, this.codeForm.password)

          }
        },
        error: function (e) {
        }
      });
    },
    downloadflie(data, pwd) {
      this.codeForm = {
        password: '',
        repassword: '',
      }
      var token = getToken()
      var url = BASE_URL + "/dataLib/downloadFile?token=" + token + "&guid=" + data.result + "&pwd=" + encrypt.encrypt(pwd);
      $("#downFrame").attr("src", url).click();
      this.loading = false;
    },
    closeDown1() {
      this.codeForm = {
        password: '',
        repassword: '',
      }
      this.downloadLogVisible = false;
    },
    downloadForm() {
      this.downloadLogVisible = true;
    },
    downloadMap(index, rows) {
      var token = getToken()
      var url = BASE_URL + "/dataLib/downloadFile?token=" + token + "&guid=" + rows.guid + "&pwd=" + rows.pwd;
      $("#downFrame").attr("src", url).click();
    },
@@ -1062,7 +1184,7 @@
      }

      this.downloadTableData = data.result;
      console.log(this.downloadTableData, data.result.length, this.downloadPage)

      this.downloadPage.count = data.count;
    },
    handleCheckedEntryNameChange(res) {
@@ -1434,6 +1556,7 @@
      this.getCollapseTable(this.filedsLayer);

    },

    async showDetail2(res) {
      var val = res.tab.split(".");
      const data = await dataLib_selectTabFields({
@@ -1948,7 +2071,7 @@
    width: calc(100% - 60px);
    height: auto;
    margin: 5px 30px;
    padding-bottom:5px ;
    padding-bottom: 5px;
    border-bottom: 1px solid #dcdfe6;
    align-items: center;
    display: flex;
@@ -2067,14 +2190,8 @@

    border-radius: 10px;
  }
}

.contentBox {
  height: 60vh;
  overflow: auto;
}

.downloadBox {
  z-index: 999;
  /deeep/.el-form-item {
    margin-bottom: 0px;
  }
}
</style>

 src/views/datamanage/styleManage.vue

@@ -159,105 +159,106 @@
      </div>
    </div>
    <div
      class="infoBox"
      class="infoBox subpage_Div box_div"
      v-show="showinfoBox"
    >
      <el-card class="box-card">

      <div
        slot="header"
        class="clearfix"
      >
        <span>{{ $t('dataManage.styleObj.deInformation') }}</span>
        <div
          slot="header"
          class="clearfix"
          style="float: right; cursor: pointer"
          @click="closeDetial"
        >
          <span>{{ $t('dataManage.styleObj.deInformation') }}</span>
          <div
            style="float: right; cursor: pointer"
            @click="closeDetial"
          >
            <i class="el-icon-close"></i>
          </div>
          <i class="el-icon-close"></i>
        </div>
        <div class="contentBox">
          <p>
            <label> {{ $t('dataManage.styleObj.name') }}:</label>
            <label class="boxlabel">{{ itemdetail.name }}</label>
          </p>
          <el-divider></el-divider>
          <p>
          <p>
            <label> {{ $t('dataManage.styleObj.type') }}:</label>
            <label class="boxlabel">{{ itemdetail.type }}</label>
          </p>
          </p>
          <el-divider></el-divider>
          <p>
            <label> {{ $t('dataManage.styleObj.dirid') }}:</label>
            <label class="boxlabel">{{ itemdetail.dirName }}</label>
          </p>
          <el-divider></el-divider>
          <p>
            <label> {{ $t('dataManage.styleObj.depid') }}:</label>
            <label class="boxlabel">{{ itemdetail.depName }}</label>
          </p>
          <el-divider></el-divider>
          <p>
            <label> {{ $t('dataManage.styleObj.ver') }}:</label>
            <label class="boxlabel">{{ itemdetail.ver }}</label>
          </p>
          <el-divider></el-divider>
          <p>
            <label> {{ $t('dataManage.styleObj.status') }}:</label>
            <label class="boxlabel">{{ itemdetail.status }}</label>
          </p>
          <el-divider></el-divider>
          <p>
            <label> {{ $t('dataManage.styleObj.descr') }}:</label>
            <label class="boxlabel">{{ itemdetail.descr }}</label>
          </p>
          <el-divider></el-divider>
          <p>
            <label> {{ $t('dataManage.styleObj.fileguid') }}:</label>
            <label class="boxlabel">{{ itemdetail.fileGuid }}</label>
          </p>
          <el-divider></el-divider>
          <p>
            <label> {{ $t('dataManage.styleObj.viewguid') }}:</label>
            <label class="boxlabel">
              <div style="width:440px;height:200px;">
                <img
                  style="width:100%; height:100%"
                  :src="itemdetail.imageFile"
                  alt=""
                />
              </div>
            </label>
          </p>
          <el-divider></el-divider>
          <p>
            <label> {{ $t('dataManage.styleObj.createUser') }}:</label>
            <label class="boxlabel">{{ itemdetail.createUser }}</label>
          </p>
          <el-divider></el-divider>
          <p>
            <label> {{ $t('dataManage.styleObj.createTime') }}:</label>
            <label class="boxlabel">{{ itemdetail.createTime }}</label>
          </p>
          <el-divider></el-divider>
          <p>
            <label> {{ $t('dataManage.styleObj.updateUser') }}:</label>
            <label class="boxlabel">{{ itemdetail.updateUser }}</label>
          </p>
          <el-divider></el-divider>
          <p>
            <label> {{ $t('dataManage.styleObj.updateTime') }}:</label>
            <label class="boxlabel">{{ itemdetail.updateTime }}</label>
          </p>
          <el-divider></el-divider>
          <p>
            <label> {{ $t('dataManage.styleObj.bak') }}:</label>
            <label class="boxlabel">{{ itemdetail.bak }}</label>
          </p>
          <el-divider></el-divider>
        </div>
      </el-card>
      </div>
      <el-divider></el-divider>
      <div class="contentBox">
        <p>
          <label> {{ $t('dataManage.styleObj.name') }}:</label>
          <label class="boxlabel">{{ itemdetail.name }}</label>
        </p>
        <el-divider></el-divider>
        <p>
        <p>
          <label> {{ $t('dataManage.styleObj.type') }}:</label>
          <label class="boxlabel">{{ itemdetail.type }}</label>
        </p>
        </p>
        <el-divider></el-divider>
        <p>
          <label> {{ $t('dataManage.styleObj.dirid') }}:</label>
          <label class="boxlabel">{{ itemdetail.dirName }}</label>
        </p>
        <el-divider></el-divider>
        <p>
          <label> {{ $t('dataManage.styleObj.depid') }}:</label>
          <label class="boxlabel">{{ itemdetail.depName }}</label>
        </p>
        <el-divider></el-divider>
        <p>
          <label> {{ $t('dataManage.styleObj.ver') }}:</label>
          <label class="boxlabel">{{ itemdetail.ver }}</label>
        </p>
        <el-divider></el-divider>
        <p>
          <label> {{ $t('dataManage.styleObj.status') }}:</label>
          <label class="boxlabel">{{ itemdetail.status }}</label>
        </p>
        <el-divider></el-divider>
        <p>
          <label> {{ $t('dataManage.styleObj.descr') }}:</label>
          <label class="boxlabel">{{ itemdetail.descr }}</label>
        </p>
        <el-divider></el-divider>
        <p>
          <label> {{ $t('dataManage.styleObj.fileguid') }}:</label>
          <label class="boxlabel">{{ itemdetail.fileGuid }}</label>
        </p>
        <el-divider></el-divider>
        <p>
          <label> {{ $t('dataManage.styleObj.viewguid') }}:</label>
          <label class="boxlabel">
            <div style="width:440px;height:200px;">
              <img
                style="width:100%; height:100%"
                :src="itemdetail.imageFile"
                alt=""
              />
            </div>
          </label>
        </p>
        <el-divider></el-divider>
        <p>
          <label> {{ $t('dataManage.styleObj.createUser') }}:</label>
          <label class="boxlabel">{{ itemdetail.createUser }}</label>
        </p>
        <el-divider></el-divider>
        <p>
          <label> {{ $t('dataManage.styleObj.createTime') }}:</label>
          <label class="boxlabel">{{ itemdetail.createTime }}</label>
        </p>
        <el-divider></el-divider>
        <p>
          <label> {{ $t('dataManage.styleObj.updateUser') }}:</label>
          <label class="boxlabel">{{ itemdetail.updateUser }}</label>
        </p>
        <el-divider></el-divider>
        <p>
          <label> {{ $t('dataManage.styleObj.updateTime') }}:</label>
          <label class="boxlabel">{{ itemdetail.updateTime }}</label>
        </p>
        <el-divider></el-divider>
        <p>
          <label> {{ $t('dataManage.styleObj.bak') }}:</label>
          <label class="boxlabel">{{ itemdetail.bak }}</label>
        </p>
        <el-divider></el-divider>
      </div>

    </div>
    <el-dialog
      :title="$t('dataManage.styleObj.modifyStyleData')"
@@ -1126,6 +1127,7 @@
        }
      }
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

 src/views/maintenance/mochaitmo.vue

@@ -41,6 +41,7 @@
        <system-monitoring v-if="setMenuFlag == 'systemMonitoring'"></system-monitoring>
        <parameter-configuration v-if="setMenuFlag == 'parameterConfiguration'"></parameter-configuration>
        <downlog v-if="setMenuFlag == 'downlog'"></downlog>
        <template-manage  v-if="setMenuFlag == 'templateManage'"></template-manage>
      </div>
    </div>

@@ -68,8 +69,10 @@
import systemMonitoring from '@/views/maintenance/systemMonitoring.vue'; //系统监控
import parameterConfiguration from '@/views/maintenance/parameterConfiguration.vue'; //系统配置
import downlog from '@/views/maintenance/downlog.vue'; //下载日志
import templateManage from '@/views/userManage/templateManage.vue'//模板管理
import { selectMenuRecursive, queryMenuTree, getPerms } from '../../api/api';
import customElMenu from '../../components/customElMenu.vue';

export default {
  components: {
    menuSettings,
@@ -91,7 +94,8 @@
    systemMonitoring,
    parameterConfiguration,
    customElMenu,
    downlog
    downlog,
    templateManage
  },
  data() {
    return {
@@ -220,7 +224,9 @@
      if (res.children != null) {
        this.setViewController(res.children[0]);
      } else {

        this.$store.state.currentPerms = res.perms;

        this.setMenuFlag = res.url;
        this.activeIndex = res.url;
      }
@@ -253,6 +259,7 @@
          index = 'dataIfream';
        }
      }
                 
      this.setMenuFlag = index;

    },

 src/views/userManage/templateManage.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,709 @@
<template>
  <div class="authorityManagement_box">
    <My-bread :list="[
        `${$t('dataManage.dataManage')}`,
        `${$t('dataManage.templateManage')}`,
      ]"></My-bread>
    <el-divider />
    <div class="searchComp subpage_Div">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :inline="true"
      >
        <el-form-item>
          <el-input
            v-model="ruleForm.name"
            :placeholder="$t('common.pleaseInput')"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            icon="el-icon-search"
            @click="setRefreshTable"
            type="primary"
            size="small"
          >{{ $t('common.iquery') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            icon="el-icon-refresh"
            @click="restRefreshTable"
            type="info"
            size="small"
          >{{ $t('common.empty') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            v-if="btnStatus.insert"
            @click="setTableInsert"
            icon="el-icon-edit"
            type="success"
            size="small"
          >{{ $t('common.append') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            v-if="btnStatus.delete"
            icon="el-icon-delete"
            @click="delTableData"
            type="danger"
            size="small"
          >{{ $t('common.delete') }}</el-button>
        </el-form-item>

      </el-form>
    </div>
    <div>
      <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          align="center"
          type="index"
          :label="$t('dataManage.styleObj.index')"
          width="70px"
        />
        <el-table-column
          align="center"
          prop="name"
          :label="$t('dataManage.styleObj.name')"
        />
        <el-table-column
          align="center"
          prop="type"
          :label="$t('common.fileType')"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.type == 1">World模板 </span>
            <span v-else-if="scope.row.type == 2">Excel模板</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="code"
          :label="$t('common.domCode')"
        />
        <el-table-column
          align="center"
          prop="fname"
          :label="$t('common.filePath')"
        />
        <el-table-column
          align="center"
          prop="bak"
          :label="$t('common.bak')"
        />
        <el-table-column
          align="center"
          prop="createName"
          :label="$t('dataManage.vmobj.createonuser')"
        />
        <el-table-column
          align="center"
          prop="createTime"
          :label="$t('dataManage.vmobj.createontime')"
          :formatter="formatData"
        />
        <el-table-column
          min-width="100"
          :label="$t('dataManage.dictionaryManageObj.operation')"
        >
          <template slot-scope="scope">
            <el-button
              v-if="btnStatus.select"
              @click="showDetail(scope.$index, scope.row)"
              type="primary"
              plain
              size="small"
            >{{ $t('dataManage.dictionaryManageObj.lookOver') }}</el-button>
            <el-button
              v-if="btnStatus.update"
              @click="handleEdit(scope.$index, scope.row)"
              type="warning"
              plain
              size="small"
            >{{ $t('dataManage.dictionaryManageObj.revamp') }}</el-button>
            <el-button
              v-if="btnStatus.download"
              plain
              @click="handleDownload(scope.$index, scope.row)"
              type="info"
              size="small"
            >{{ $t('common.download') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top:10px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="listData.pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="listData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="listData.count"
        >
        </el-pagination>
      </div>
    </div>
    <!-- æ–°å¢ž -->
    <el-dialog
      :title="
        behavior == '新增'
          ? `${$t('common.append')}`
          : `${$t('common.update')}`
      "
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
      :show-close="false"
    >
      <div>
        <el-form
          ref="form"
          :model="editForm"
          label-width="100px"
        >
          <el-form-item :label="$t('dataManage.styleObj.name')">
            <el-input
              style="width:100%"
              v-model=" editForm.name"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('common.fileType')">
            <el-select
              :popper-append-to-body="false"
              v-model="editForm.type"
              @change="selFileTypeChange"
              placeholder="请选择活动区域"
              style="width:100%"
            >
              <el-option
                label="World模板"
                value="1"
              ></el-option>
              <el-option
                label="Excel模板"
                value="2"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('common.domCode')">
            <el-input
              style="width:100%"
              v-model=" editForm.code"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('common.filePath')">
            <div class="BoxFlex">
              <div class="BoxFlexinput">
                <el-input
                  v-model="editForm.fname"
                  disabled
                  autocomplete="off"
                  style="width:100%"
                ></el-input>
              </div>
              <div>
                <input
                  name="file1"
                  type="file"
                  id="editFile"
                  multiple="multiple"
                  :accept="selectFileType"
                  style="display: none"
                  @change="geteditFile(1)"
                />
                <el-button
                  style="margin-left: 6px;"
                  type="primary"
                  size="small"
                  :underline="false"
                  @click="geteditFile(0)"
                >选择</el-button>
                <el-button
                  type="primary"
                  size="small"
                  :underline="false"
                  @click="geteditFile(2)"
                >上传</el-button>
              </div>
            </div>
          </el-form-item>
          <el-form-item :label="$t('common.bak')">
            <el-input
              style="width:100%"
              v-model="editForm.bak"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div
        v-if="behavior =='新增'"
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size="small"
          @click="closeInsertData"
        >取 æ¶ˆ</el-button>
        <el-button
          type="primary"
          size="small"
          @click="addInsertData"
        >ç¡® å®š</el-button>
      </div>
      <div
        v-if="behavior !='新增'"
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size="small"
          @click="closeEditData"
        >取 æ¶ˆ</el-button>
        <el-button
          type="primary"
          size="small"
          @click="addEditData"
        >ç¡® å®š</el-button>
      </div>
    </el-dialog>
    <div
      class="infoBox subpage_Div box_div"
      v-show="showinfoBox"
    >

      <div
        slot="header"
        class="clearfix"
      >
        <span>{{ $t('dataManage.styleObj.deInformation') }}</span>
        <div
          style="float: right; cursor: pointer"
          @click="closeDetial"
        >
          <i class="el-icon-close"></i>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="contentBox">
        <p>
          <label> {{ $t('dataManage.styleObj.name') }}:</label>
          <label class="boxlabel">{{ itemdetail.name }}</label>
        </p>
        <el-divider></el-divider>
        <p>
        <p>
          <label> {{ $t('common.fileType') }}:</label>
          <label class="boxlabel">{{ itemdetail.fileType }}</label>
        </p>
        </p>
        <el-divider></el-divider>
        <p>
          <label> {{ $t('common.domCode') }}:</label>
          <label class="boxlabel">{{ itemdetail.code }}</label>
        </p>
        <el-divider></el-divider>
        <p>
          <label> {{ $t('common.filePath') }}:</label>
          <label class="boxlabel">{{ itemdetail.fname }}</label>
        </p>
        <el-divider></el-divider>
        <p>
          <label> {{ $t('common.bak') }}:</label>
          <label class="boxlabel">{{ itemdetail.bak }}</label>
        </p>
        <el-divider></el-divider>
        <p>
          <label> {{ $t('dataManage.vmobj.createonuser') }}:</label>
          <label class="boxlabel">{{ itemdetail.createName }}</label>
        </p>
        <el-divider></el-divider>
        <p>
          <label> {{ $t('dataManage.vmobj.createontime') }}:</label>
          <label class="boxlabel">{{ itemdetail.cTime }}</label>
        </p>
        <el-divider></el-divider>
        <p>
          <label> {{ $t('dataManage.vmobj.updateonuser') }}:</label>
          <label class="boxlabel">{{ itemdetail.updateName }}</label>
        </p>
        <el-divider></el-divider>
        <p>
          <label> {{ $t('dataManage.vmobj.updateontime') }}:</label>
          <label class="boxlabel">{{ itemdetail.uTime }}</label>
        </p>
        <el-divider></el-divider>
      </div>

    </div>
    <iframe
      id="downFrame"
      src=""
      style="display: none; border: 0; padding: 0; height: 0; width: 0"
    ></iframe>
  </div>
</template>

<script>

import MyBread from "../../components/MyBread.vue";
import {
  report_selectByPageAndCount,
  report_upload,
  report_insert,
  report_deletes,
  report_update
} from '../../api/api.js'
import { getToken } from '@/utils/auth';
export default {
  name: "templateManage",
  components: { MyBread, },
  data() {
    return {
      itemdetail: {},
      showinfoBox: false,
      behavior: '新增',
      selectFileType: '*.*',
      editForm: {
        fname: '',
        guid: '',
        name: '',
        code: '',
        type: '',
        bak: '',
      },
      multipleSelection: [],
      dialogVisible: false,
      tableData: [],
      ruleForm: {
        name: ''
      },
      listData: {
        pageIndex: 1,
        pageSize: 10,
        name: '',
        count: 0,
      },
      btnStatus: {
        select: false,
        delete: false,
        upload: false,
        download: false,
        insert: false,
        update: false,
      },
    }
  },
  created() {
    this.showPermsBtn();
    this.showTableData();

  },
  methods: {
    //修改取消
    closeEditData() {
      this.closeInsertData();
    },
    handleClose() {
      var blackTheme;
      if (this.$store.state.themeflag == true) {
        blackTheme = {
          customClass: "Black_theme"
        }
      }

      this.$confirm('确认关闭？', blackTheme)
        .then((_) => {
          this.closeInsertData();

        })
        .catch((_) => { });
    },
    //查看
    showDetail(index, row) {
      this.itemdetail = row;

      if (parseInt(row.type) == 1) {
        this.itemdetail.fileType = "World模板"
      } else if (parseInt(row.type) == 2) {
        this.itemdetail.fileType = "Excel模板"
      }

      this.itemdetail.uTime = this.format(row.updateTime);
      this.showinfoBox = true
    },
    //关闭查看
    closeDetial() {
      this.showinfoBox = false
    },
    //下载
    handleDownload(index, row) {
      var token = getToken();
      var url = BASE_URL + "/report/download?token=" + token + "&guid=" + row.guid;
      $("#downFrame").attr("src", url).click();
    },
    //修改提交
    async addEditData() {
      const data = await report_update(this.editForm);
      if (data.code != 200) {
        return this.$message.error("修改失败");
      }
      this.$message({
        message: '修改成功',
        type: 'success'
      });
      this.closeInsertData();
    },
    //文件类型切换
    selFileTypeChange(val) {
      if (parseInt(val) == 1) {
        this.selectFileType = ".doc,.docx"
      } else if (parseInt(val) == 2) {
        this.selectFileType = ".xls,.xlsx"
      }
    },
    //修改
    handleEdit(index, row) {
      this.behavior = "修改"
      this.editForm = row;
      if (parseInt(row.type) == 1) {
        this.selectFileType = ".doc,.docx"
      } else if (parseInt(row.type) == 2) {
        this.selectFileType = ".xls,.xlsx"
      }
      this.dialogVisible = true;
    },
    //删除
    async delTableData() {
      if (this.multipleSelection.length == 0) {
        return this.$message('请选择要删除的数据');
      }
      var std = [];
      for (var i in this.multipleSelection) {
        std.push(this.multipleSelection[i].id)
      }
      const data = await report_deletes({ ids: std.toString() })
      if (data.code != 200) {
        return this.$message.error("删除失败");
      }
      this.$message({
        message: '删除成功',
        type: 'success'
      });
      this.setRefreshTable();
    },


    //重置查询
    restRefreshTable() {
      this.ruleForm.name = "";
      this.setRefreshTable();
    },
    //重置刷新Table
    setRefreshTable() {
      this.listData.pageIndex = 1;
      this.listData.pageSize = 10;
      this.showTableData();
    },
    //新增一条数据
    async addInsertData() {
      const data = await report_insert(this.editForm);
      if (data.code != 200) {
        return this.$message.error("新增失败");
      }
      this.$message({
        message: '新增成功',
        type: 'success'
      });
      this.closeInsertData();
    },
    //关闭新增
    closeInsertData() {
      this.dialogVisible = false;
      this.editForm = {
        fname: '',
        guid: '',
        name: '',
        code: '',
        type: '',
        bak: '',
      }
      this.setRefreshTable();
      document.getElementById("editFile").value = "";
    },
    //文件上传
    async geteditFile(res) {
      if (res == 0) {
        if (this.editForm.type == '') {
          return this.$message('请选择上传文件类型');
        }

        $("#editFile").click();
      } else if (res == 1) {
        var val = document.getElementById("editFile").files;
        if (!val || !val.length) return;
        this.editForm.fname = val[0].name;
      } else if (res == 2) {
        var fs = document.getElementById("editFile");
        if (fs.files.length == 0) {
          return;
        }
        var formData = new FormData();
        formData.append("file", fs.files[0]);
        var val_data = await report_upload(formData);
        if (val_data.code == 200) {

          this.editForm.guid = val_data.result;
          this.$message({
            message: "上传成功！",
            type: "success",
          });
        } else {
          this.$message({
            message: "上传失败！",
            type: "warning",
          });
        }
      }

    },
    //格式化列表
    formatData(row, column) {
      let data = row[column.property];
      if (data == null) {
        return data;
      }
      return this.format(data);
    },
    //格式化时间
    format(shijianchuo) {
      //shijianchuo是整数，否则要parseInt转换
      var time = new Date(shijianchuo);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return y + '-' + this.add0(m) + '-' + this.add0(d);
    },
    //格式化时间
    add0(m) {
      return m < 10 ? '0' + m : m;
    },
    //Table选择事件
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //新增弹窗
    setTableInsert() {
      this.behavior = "新增"
      this.dialogVisible = true
    },
    //分页切换
    handleSizeChange(val) {
      this.listData.pageSize = val;
      this.listData.pageIndex = 1;
      this.showTableData();
    },
    //分页切换
    handleCurrentChange(val) {
      this.listData.pageIndex = val;
      this.showTableData();
    },
    //列表调用
    async showTableData() {
      this.listData.name = this.ruleForm.name;
      const data = await report_selectByPageAndCount(this.listData);
      if (data.code != 200) {
        return this.$message.error("列表调用失败");
      }
      this.tableData = data.result;
      this.listData.count = data.count
    },
    //权限配置
    showPermsBtn() {
      let currentPerms = this.$store.state.currentPerms;
      let permsEntity = this.$store.state.permsEntity;
      permsEntity
        .filter((item) => item.perms == currentPerms)
        .map((item) => (this.btnStatus[item.tag.substr(1)] = true));
    },
  },
};
</script>
<style lang="less" scoped>
//@import url(); å¼•å…¥å…¬å…±cssç±»
.authorityManagement_box {
  height: 98%;
  width: 98%;
  padding: 1%;

  .el-input {
    width: 730px;
  }

  .searchComp {
    margin: 10px auto;

    border-radius: 5px;

    .el-form-item {
      margin: 5px;
    }
    .el-input {
      width: 467px;
    }
  }
  .leftTree {
    position: absolute;
    z-index: 10;
    z-index: 9999;
    top: 100px;
    left: 800px;
    width: 400px;
    height: 600px;

    .treeBox {
      height: 550px;
      overflow: auto;
    }
    .btnBox {
      width: 160px;
      margin: 10px auto 0;
    }
  }
  .bottom {
    width: 100%;
    height: 85%;
    .rightTable {
      height: 100%;
      width: 100%;
      .table_box {
        width: 100%;
        height: 80%;
        margin: 0 auto;
        overflow: auto;
      }
    }
  }
  .BoxFlex {
    display: flex;
    justify-content: space-around;
    width: 100%;
    .BoxFlexinput {
      flex: 1;
    }
  }
}
</style>