完成cnas8.4迁移

licp

2024-12-18 d3a25e467d1d63808c6864874a021ada79180e4d

完成cnas8.4迁移

 src/assets/api/controller.js

@@ -35,6 +35,13 @@
    role,
    insProductTemplate,
    manageDocumentList,
    manageRecordTotal,
    manageRecordCheck,
    manageRecordIssueRecycle,
    manageRecordIntervals,
    manageRecordCancel,
    manageRecordAudit,
    personnel,
  }
}

@@ -469,3 +476,74 @@
  checkManageDocumentAlterPdf:'/manageDocumentAlter/checkManageDocumentAlterPdf', // æ–‡ä»¶å˜æ›´-转换流
  exportManageDocumentAlter:'/manageDocumentAlter/exportManageDocumentAlter', // æ–‡ä»¶å˜æ›´-导出
}

// 8.4记录的控制--外来文件确认记录
const manageRecordTotal = {
  pageManageRecordTotal:'/manageRecordTotal/pageManageRecordTotal',//历史--列表
  submitManageRecordTotal:'/manageRecordTotal/submitManageRecordTotal',//历史--提交
  ratifyManageRecordTotal:'/manageRecordTotal/ratifyManageRecordTotal',//历史--审核
  pageManageRecordVerify:'/manageRecordVerify/pageManageRecordVerify',//填写--列表
  addManageRecordVerify:'/manageRecordVerify/addManageRecordVerify',//填写--新增
  delManageRecordVerify:'/manageRecordVerify/delManageRecordVerify',//填写--删除
  doManageRecordVerify:'/manageRecordVerify/doManageRecordVerify',//填写--修改
  exportManageRecordVerify:'/manageRecordVerify/exportManageRecordVerify',//填写--导入
}
// 8.4记录的控制--文件审批记录
const manageRecordCheck = {
  pageManageRecordCheck:'/manageRecordCheck/pageManageRecordCheck ',//列表
  addManageRecordCheck:'/manageRecordCheck/addManageRecordCheck ',//新增
  doManageRecordCheck:'/manageRecordCheck/doManageRecordCheck ',//编辑
  delManageRecordCheck:'/manageRecordCheck/delManageRecordCheck ',//删除
  checkManageRecordCheck:'/manageRecordCheck/checkManageRecordCheck ',//审核
  ratifyManageRecordCheck:'/manageRecordCheck/ratifyManageRecordCheck ',//批准
  exportOutManageRecordCheck:'/manageRecordCheck/exportOutManageRecordCheck ',//导出
  exportInManageRecordCheck:'/manageRecordCheck/exportInManageRecordCheck',//导入
}

// 8.4记录的控制--文件发放回收记录
const manageRecordIssueRecycle = {
  pageManageRecordIssueRecycle:'/manageRecordIssueRecycle/pageManageRecordIssueRecycle',//列表
  delManageRecordIssueRecycle:'/manageRecordIssueRecycle/delManageRecordIssueRecycle',//删除
  addManageRecordIssueRecycle:'/manageRecordIssueRecycle/addManageRecordIssueRecycle',//新增
  doManageRecordIssueRecycle:'/manageRecordIssueRecycle/doManageRecordIssueRecycle',//编辑
  exportOutManageRecordIssueRecycle:'/manageRecordIssueRecycle/exportOutManageRecordIssueRecycle',//导出
  exportInManageRecordIssueRecycle:'/manageRecordIssueRecycle/exportInManageRecordIssueRecycle',//导入
}
// 8.4记录的控制--文件定期审查记录
const manageRecordIntervals = {
  pageManageRecordIntervals:'/manageRecordIntervals/pageManageRecordIntervals',//列表
  addManageRecordIntervals:'/manageRecordIntervals/addManageRecordIntervals',//新增
  doManageRecordIntervals:'/manageRecordIntervals/doManageRecordIntervals',//编辑
  delManageRecordIntervals:'/manageRecordIntervals/delManageRecordIntervals',//删除
  exportOutManageRecordIntervals:'/manageRecordIntervals/exportOutManageRecordIntervals',//导出
  exportInManageRecordIntervals:'/manageRecordIntervals/exportInManageRecordIntervals',//导入
  pageManageRecordIntervalsTotal:'/manageRecordIntervalsTotal/pageManageRecordIntervalsTotal',//历史记录-列表
  submitManageRecordIntervalsTotal:'/manageRecordIntervalsTotal/submitManageRecordIntervalsTotal',//历史记录-提交
  ratifyManageRecordIntervalsTotal:'/manageRecordIntervalsTotal/ratifyManageRecordIntervalsTotal',//历史记录-批准
}

// 8.4记录的控制--文件作废记录
const manageRecordCancel = {
  pageManageRecordCancel:'/manageRecordCancel/pageManageRecordCancel',//列表
  addManageRecordCancel:'/manageRecordCancel/addManageRecordCancel',//新增
  doManageRecordCancel:'/manageRecordCancel/doManageRecordCancel',//编辑
  delManageRecordCancel:'/manageRecordCancel/delManageRecordCancel',//删除
  ratifyManageRecordCancel:'/manageRecordCancel/ratifyManageRecordCancel',//批准
  exportOutManageRecordCancel:'/manageRecordCancel/exportOutManageRecordCancel',//导出
  exportInManageRecordCancel:'/manageRecordCancel/exportInManageRecordCancel',//导入
}

// 8.4记录的控制--文件修订
const manageRecordAudit = {
  pageManageRecordAudit:'/manageRecordAudit/pageManageRecordAudit', // åˆ—表
  addManageRecordAudit:'/manageRecordAudit/addManageRecordAudit', // æ–°å¢ž
  doManageRecordAudit:'/manageRecordAudit/doManageRecordAudit', // ç¼–辑
  delManageRecordAudit:'/manageRecordAudit/delManageRecordAudit', // åˆ é™¤
  ratifyManageRecordAudit:'/manageRecordAudit/ratifyManageRecordAudit', // æ‰¹å‡†
  exportOutManageRecordAudit:'/manageRecordAudit/exportOutManageRecordAudit', // å¯¼å‡ºåˆ—表
}

// 6.2 äººå‘˜
const personnel = {
  selectCNSAPersonTree: '/personBasicInfo/selectCNSAPersonTree', // æŸ¥è¯¢CNAS人员侧边栏
}

 src/components/tool/value-table.vue

@@ -4,10 +4,6 @@
    height: 100%;
    overflow-y: auto;
  }
  >>>.el-table__row {
    cursor: move;
    position: relative;
  }

  .table {
    width: 100%;
@@ -117,28 +113,44 @@
<template>
  <div class="value-table">
    <div class="table" :style="data.isPage!=undefined&&data.isPage!=true?'height:100%':''">
      <el-table ref="eltable" :data="tableData" style="width: 100%;" height="100%" tooltip-effect="dark" border
        @selection-change="selectChange" @select="select" v-loading="loading" @sort-change="sortChange"
        @row-click="rowClick" :show-summary="data.countFleid!=undefined && data.countFleid.length > 0"
        :summary-method="getSummaries" :row-class-name="tableRowClassName" :row-key="record=>record[rowKey]"
        :current-row-key="data.currentId" :highlight-current-row="data.highlight===undefined||data.highlight"
        :span-method="spanMethod" :key="specialKey" :class="{sortable:data.sortable}">
        <el-table-column type="selection" :width="selectionWidth" v-if="data.showSelect" :key="Math.random()">
      <el-table
        ref="eltable"
        v-loading="loading"
        :data="tableData"
        style="width: 100%;"
        height="100%"
        tooltip-effect="dark"
        element-loading-text="加载中..."
        :border="true"
        :show-summary="data.countFleid!=undefined && data.countFleid.length > 0"
        :summary-method="getSummaries"
        :row-class-name="tableRowClassName"
        :row-key="record=>record[rowKey]"
        :current-row-key="data.currentId"
        :highlight-current-row="data.highlight===undefined||data.highlight"
        :span-method="spanMethod"
        :key="specialKey"
        @selection-change="selectChange"
        @select="select"
        @sort-change="sortChange"
        @row-click="rowClick"
        element-loading-spinner="el-icon-loading">
        <el-table-column :reserve-selection="isReserveSelection" type="selection" :width="selectionWidth" v-if="data.showSelect" :key="Math.random()">
        </el-table-column>
        <el-table-column type="index" align="center" label="序号" :width="selectionWidth" v-if="data.isIndex" :key="Math.random()">
        </el-table-column>
        <el-table-column :prop="a.label" :label="a.value" :sortable="a.sort === 'custom' ? 'custom' : false" :isColumnWidth="isColumnWidth" :isShowZero="isShowZero"
          v-for="(a, ai) in tableHead" :key="ai+'bbbbb'" show-overflow-tooltip :min-width="columnMinWidth" v-if="!data.headNoShow||(data.headNoShow&&data.headNoShow.length==0)||(data.headNoShow&&data.headNoShow.length>0&&!data.headNoShow.find(d=>d==a.label))">
        <el-table-column :prop="a.label" :label="a.value" :width="a.width" :sortable="a.sort === 'custom' ? 'custom' : false" :isColumnWidth="isColumnWidth" :isShowZero="isShowZero"
          v-for="(a, ai) in tableHead" :key="ai" show-overflow-tooltip :min-width="columnMinWidth" v-if="!data.headNoShow||(data.headNoShow&&data.headNoShow.length==0)||(data.headNoShow&&data.headNoShow.length>0&&!data.headNoShow.find(d=>d==a.label))">
          <template slot-scope="scope">
            <div v-if="showType(a.label, data.tagField) != null">
              <template v-if="typeof(scope.row[a.label]) == 'object'">
                <template v-for="(param, i) in scope.row[a.label]">
                  <el-tag v-for="(b, bi) in data.tagField[a.label].select" :key="bi+'cccc'" v-if="b.value == param"
                  <el-tag v-for="(b, bi) in data.tagField[a.label].select" :key="bi" v-if="b.value == param"
                    :type="b.type" size="medium" style="margin-right: 5px;">{{b.label}}</el-tag>
                </template>
              </template>
              <template v-else>
                <el-tag v-for="(b, bi) in data.tagField[a.label].select" :key="bi+'ddddd'" v-show="b.value == scope.row[a.label]"
                <el-tag v-for="(b, bi) in data.tagField[a.label].select" :key="bi" v-show="b.value == scope.row[a.label]"
                  :type="b.type" size="medium">{{b.label}}</el-tag>
              </template>
            </div>
@@ -183,12 +195,12 @@
            </el-col>
            <el-col :span="16/data.row">
              <el-input v-model="upData[a.label]" size="small" clearable :placeholder="`请输入${a.value}`"
                v-if="showType(a.label, data.selectField) == null&&!showUpload(a.label)&&!showCascader(a.label)"
                v-if="showType(a.label, data.selectField) == null&&!showUpload(a.label)&&!showCascader(a.label)&&!showDatePicker(a.label)"
                :disabled="isDisabled(a.label)"></el-input>
              <el-select v-model="upData[a.label]" :multiple="data.selectField[a.label].choose" size="small"
                v-if="showType(a.label, data.selectField) != null" style="width: 100%;" :disabled="isDisabled(a.label)"
                clearable filterable>
                <el-option v-for="(b, bi) in data.selectField[a.label].select" :key="bi+'eeeee'" :value="b.value"
                <el-option v-for="(b, bi) in data.selectField[a.label].select" :key="bi" :value="b.value"
                  :label="b.label">
                </el-option>
              </el-select>
@@ -205,6 +217,15 @@
                v-if="showCascader(a.label)" :placeholder="`请选择${a.value}`" clearable
                :props="data.cascaderField.props" size="small" style="width: 100%;"
                @change="m=>handleCascader(m,a.label)" filterable></el-cascader>
                <el-date-picker
                v-if="showDatePicker(a.label)"
                v-model="upData[a.label]"
                type="date"
                size="small"
                placeholder="选择日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd" style="width: 100%;">
              </el-date-picker>
            </el-col>
          </div>
        </div>
@@ -215,12 +236,12 @@
            </el-col>
            <el-col :span="16" :offset="1">
              <el-input v-model="upData[a.label]" size="small" clearable :placeholder="`请输入${a.value}`"
                v-if="showType(a.label, data.selectField) == null&&!showUpload(a.label)&&!showCascader(a.label)"
                v-if="showType(a.label, data.selectField) == null&&!showUpload(a.label)&&!showCascader(a.label)&&!showDatePicker(a.label)"
                :disabled="isDisabled(a.label)"></el-input>
              <el-select v-model="upData[a.label]" :multiple="data.selectField[a.label].choose" size="small"
                v-if="showType(a.label, data.selectField) != null" style="width: 100%;" :disabled="isDisabled(a.label)"
                clearable filterable>
                <el-option v-for="(b, bi) in data.selectField[a.label].select" :key="bi+'fffff'" :value="b.value"
                <el-option v-for="(b, bi) in data.selectField[a.label].select" :key="bi" :value="b.value"
                  :label="b.label"></el-option>
              </el-select>
              <el-upload :action="javaApi+data.addUploadConfig.url" v-if="showUpload(a.label)" :multiple="false"
@@ -234,6 +255,15 @@
              <el-cascader :value="upData[a.label]" :options="data.cascaderField[a.label].tree" :show-all-levels="false"
                :placeholder="`请选择${a.value}`" v-if="showCascader(a.label)" clearable :props="data.cascaderField.props"
                size="small" style="width: 100%;" @change="m=>handleCascader(m,a.label)" filterable></el-cascader>
                <el-date-picker
                v-if="showDatePicker(a.label)"
                v-model="upData[a.label]"
                type="date"
                size="small"
                placeholder="选择日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd" style="width: 100%;">
              </el-date-picker>
            </el-col>
          </el-row>
        </div>
@@ -252,7 +282,7 @@
              </span>{{a.value}}：</el-col>
            <el-col :span="16/data.row">
              <el-input v-model="upData[a.label]" size="small" clearable :placeholder="`请输入${a.value}`"
                v-if="showType(a.label, data.selectField) == null&&!showUpload(a.label)&&!showCascader(a.label)"></el-input>
                v-if="showType(a.label, data.selectField) == null&&!showUpload(a.label)&&!showCascader(a.label)&&!showDatePicker(a.label)"></el-input>
              <el-select v-model="upData[a.label]" size="small" v-if="showType(a.label, data.selectField) != null"
              :multiple="data.selectField[a.label].choose"
                style="width: 100%;" :placeholder="`请选择${a.value}`" clearable filterable>
@@ -271,19 +301,28 @@
              <el-cascader :options="data.cascaderField[a.label].tree" v-if="showCascader(a.label)" clearable
                :placeholder="`请选择${a.value}`" :props="data.cascaderField.props" size="small" style="width: 100%;"
                @change="m=>handleCascader(m,a.label)" filterable :show-all-levels="false"></el-cascader>
                <el-date-picker
                v-if="showDatePicker(a.label)"
                v-model="upData[a.label]"
                type="date"
                size="small"
                placeholder="选择日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd" style="width: 100%;">
              </el-date-picker>
            </el-col>
          </div>
        </div>
        <div v-else>
          <el-row v-for="(a, ai) in upHead" :key="ai+'jjjjj'" style="line-height: 50px;">
          <el-row v-for="(a, ai) in upHead" :key="ai" style="line-height: 50px;">
            <el-col :span="6" style="text-align: right;"><span class="required-span" v-if="showAddReq(a.label)">*
              </span>{{a.value}}：</el-col>
            <el-col :span="16" :offset="1">
              <el-input v-model="upData[a.label]" size="small" clearable :placeholder="`请输入${a.value}`"
                v-if="showType(a.label, data.selectField) == null&&!showUpload(a.label)&&!showCascader(a.label)"></el-input>
                v-if="showType(a.label, data.selectField) == null&&!showUpload(a.label)&&!showCascader(a.label)&&!showDatePicker(a.label)"></el-input>
              <el-select v-model="upData[a.label]" size="small" v-if="showType(a.label, data.selectField) != null"
              :multiple="data.selectField[a.label].choose"
                style="width: 100%;" :placeholder="`请选择${a.value}`" clearable>
                style="width: 100%;" :placeholder="`请选择${a.value}`" clearable filterable>
                <el-option v-for="(b, bi) in data.selectField[a.label].select" :key="bi+'mmmmmm'" :value="b.value"
                  :label="b.label"></el-option>
              </el-select>
@@ -299,6 +338,15 @@
              <el-cascader :options="data.cascaderField[a.label].tree" v-if="showCascader(a.label)" clearable
                :placeholder="`请选择${a.value}`" :props="data.cascaderField.props" size="small" style="width: 100%;"
                @change="m=>handleCascader(m,a.label)" filterable :show-all-levels="false"></el-cascader>
                <el-date-picker
                v-if="showDatePicker(a.label)"
                v-model="upData[a.label]"
                type="date"
                size="small"
                placeholder="选择日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd" style="width: 100%;">
              </el-date-picker>
            </el-col>
          </el-row>
        </div>
@@ -336,9 +384,23 @@
</template>

<script>
  import Sortable from 'sortablejs';

  export default {
    props: {
      isReserveSelection:{
        type: Boolean,
        default: ()=> false
      },
      dateFormat: {
        type: String,
        default: () => 'yyyy-MM-dd HH:mm:ss'
      },
      isSelectedList: {
        type: Array,
        default: ()=>{
          return []
        }
      },
      selectionWidth: {
        type: String,
        default: () => '65'
@@ -502,36 +564,21 @@
        'token': sessionStorage.getItem('token')
      }
      this.specialKey = this.specialKey+Math.random()*100;
      // æ˜¯å¦å¯æ‹–动列表--此功能暂时未实现
      if(this.data.sortable){
        this.$nextTick(() => {
          this.initializeSortable()
        })
      }
    },
    watch: {
    componentData: {
      handler(newVal) {
        this.data = newVal;
        // this.selectList();
      },
      deep: true
    },
  },
    methods: {
      initializeSortable() {
        let className =".el-table__body-wrapper > table > tbody";
        const table= document.querySelector(className);
        const self = this
        Sortable.create(table, {
        animation: 150, //动画时长
        handle: ".el-table__row", //可拖拽区域class
        onEnd({ newIndex, oldIndex }) {
            console.log(3333,newIndex, oldIndex)
            const movedItem = this.tableData[oldIndex];
            this.tableData.splice(oldIndex, 1);
            this.tableData.splice(newIndex, 0, movedItem);
          }
        })
      },
      getUpdatedOrder() {
        // æ ¹æ®æ‹–拽后的顺序获取更新的数据
        // è¿™é‡Œéœ€è¦å®žçŽ°ä½ çš„逻辑
      },
      updateTableData(newOrder) {
        // æ ¹æ®æ–°çš„顺序更新表格数据
        // è¿™é‡Œéœ€è¦å®žçŽ°ä½ çš„逻辑
      // è®¾ç½®å¤šé€‰çŠ¶æ€
      setSelect(row, index) {
        let result = this.isSelectedList.includes(row.id)
        return !result;
      },
      rowspan(spanArr, position, spanName) {
        this.tableData.forEach((item, index) => {
@@ -613,11 +660,14 @@
        }
      },
      rowClick(row, column, event) {
        if (this.data.select) {
          this.$refs['eltable'].toggleRowSelection(row)
        } else {
          this.$refs['eltable'].clearSelection()
          this.$refs['eltable'].toggleRowSelection(row, true)
        let result = this.isSelectedList.includes(row.id)
        if(!result) {
          if (this.data.select) {
            this.$refs['eltable'].toggleRowSelection(row)
          } else {
            this.$refs['eltable'].clearSelection()
            this.$refs['eltable'].toggleRowSelection(row, true)
          }
        }
      },
      sizeChange(val) {
@@ -652,13 +702,27 @@
            'Content-Type': 'application/json'
          }
        }).then(res => {
          this.$nextTick();
          if (res.code === 201) {
            this.loading = false
            return
          }
          this.total = res.data.body.total
          this.tableHead = res.data.head
          this.tableData = res.data.body.records
          this.tableData = res.data.body.records || res.data.body
          if(res.data.body.records){
            this.$emit("getTableData",res.data.body.records)
          }
          if(this.dateFormat.trim() == 'yyyy-MM-dd') {
            const dateTimeRegex = /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/; //格式化时间为'yyyy-MM-dd HH:mm:ss'
            this.tableData.map(item => {
              Object.keys(item).forEach(val => {
                if ( typeof item[val] == 'string' && dateTimeRegex.test(item[val])) {
                  item[val] = item[val].split(' ')[0]
                }
              })
            })
          }
          if (this.data.needSort !== undefined) {
            for (var i = 0; i < this.data.needSort.length; i++) {
              this.tableHead.forEach(item => {
@@ -737,8 +801,11 @@
                .spanConfig.special.main);
            })
          }
          this.loading = false
          this.$nextTick(()=>{
            this.loading = false
          })
        }).catch(e => {
          console.log(e);
          this.loading = false
          this.$message.error('请刷新页面再尝试')
        })
@@ -801,6 +868,13 @@
          return false;
        }
      },
      showDatePicker(label){
        if (this.data.datePicker && this.data.datePicker.find(m=>m==label)) {
          return true;
        } else {
          return false;
        }
      },
      handleTree(arr, value) {
        let label = ''
        for (let i = 0; i < arr.length; i++) {
@@ -820,6 +894,11 @@
            this.upDia = true,
            this.upData = this.HaveJson(row)
            this.upHead = this.HaveJson(this.tableHead)
            if(this.data.noHead&&this.data.noHead.length>0){
            for (let i =0; i < this.data.noHead.length; i++) {
              this.upHead = this.upHead.filter(item => item.label != this.data.noHead[i])
            }
          }
            this.upHead.forEach((item, index) => {
              if (this.data.cascaderField && this.data.cascaderField[item.label]) {
                if (this.upData[item.label]) {
@@ -878,7 +957,14 @@
          }
        } else {
          delete row.orderBy
          this.$parent[val.method](row)
          if(this.$parent[val.method]){
            this.$parent[val.method](row)
          }else if(this.$parent.$parent[val.method]){
            this.$parent.$parent[val.method](row)
          }else if(this.$parent.$parent.$parent[val.method]){
            this.$parent.$parent.$parent[val.method](row)
          }

        }
      },
      saveUpData() {
@@ -982,12 +1068,13 @@
          this.$message.error('请给添加请求地址')
          return
        }

        for (var i = 0; i < this.data.requiredAdd.length; i++) {
          if (this.upData[this.data.requiredAdd[i]] === null || this.upData[this.data.requiredAdd[i]] === '') {
          if (this.upData[this.data.requiredAdd[i]] === null || this.upData[this.data.requiredAdd[i]] === '' || this.upData[this.data.requiredAdd[i]] === undefined) {
            var list = this.upHead.filter(a => {
              if (a.label == this.data.requiredAdd[i]) return a
            })
            if (list[0].value == undefined) continue
            if (list[0].value == undefined || list[0].value == null || list[0].value == '') continue
            this.$message.error(list[0].value + '是必填项')
            return
          }
@@ -1067,7 +1154,7 @@
          eleLink.click()
          document.body.removeChild(eleLink)
        }).catch(e => {
          console.log(e);
          // console.log(e);
          this.loading = false
          this.$message.error('请刷新页面再尝试')
        })
@@ -1244,7 +1331,7 @@
        }else{
          return false
        }
      }
      },
    }
  }
</script>

 src/components/view/a8-distribution-retrieval-records-all-documents.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,501 @@
<template>
  <!-- æ‰€æœ‰æ–‡ä»¶ï¼ˆå†…、外部文件）的发放与回收记录 -->
  <div class="DistributionRetrievalRecordsAllDocuments">
    <el-row class="title">
      <el-col :span="12" style="padding-left: 20px;text-align: left;">所有文件（内、外部文件）的发放与回收记录</el-col>
      <el-col :span="12" style="text-align: right;">
        <el-button size="medium" type="primary" @click="openAdd" v-if="addPower">新增</el-button>
        <el-upload :action="action" :multiple="false"
              :show-file-list="false"
          accept='.doc,.docx' :headers="headers" :on-change="beforeUpload"
          :on-error="onError" ref='upload' v-if="upPower" :on-success="handleSuccessUp" style="display:inline-block;margin-left: 20px;">
          <el-button type="primary" size="medium">导入</el-button></el-upload>
        <el-button size="medium" type="primary" @click="handleDown" :loading="outLoading" v-if="outPower" style="display:inline-block;margin-left: 20px;">导出</el-button>
      </el-col>
    </el-row>
    <div class="search">
      <div class="search_thing">
        <div class="search_label">文件名称：</div>
        <div class="search_input"><el-input size="small" placeholder="请输入" clearable v-model="componentData.entity.documentName"
            @keyup.enter.native="refreshTable()"></el-input></div>
      </div>
      <div class="search_thing">
        <div class="search_label">文件编号：</div>
        <div class="search_input">
          <el-input size="small" placeholder="请输入" clearable v-model="componentData.entity.documentCode"
            @keyup.enter.native="refreshTable()"></el-input>
        </div>
      </div>
      <div class="search_thing" style="padding-left: 30px;">
        <el-button size="small" @click="refresh()">重 ç½®</el-button>
        <el-button size="small" type="primary" @click="refreshTable()">查 è¯¢</el-button>
      </div>
    </div>
    <div class="table">
      <ValueTable ref="ValueTable" :url="$api.manageRecordIssueRecycle.pageManageRecordIssueRecycle"
        :delUrl="$api.manageRecordIssueRecycle.delManageRecordIssueRecycle"
        :componentData="componentData" :upUrl="$api.manageRecordIssueRecycle.doManageRecordIssueRecycle" :key="upIndex"/>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="addDialogVisible"
      width="400px" top="6vh">
      <el-row>
        <el-col :span="24" style="margin-bottom: 16px;">
          <div class="search_thing">
            <div class="search_label"><span style="color: red;margin-left: 4px;">* </span>文件编号：</div>
            <div class="search_input">
              <el-select v-model="addInfo.documentCode" size="small" style="width: 100%;" @change="getCurrentFile" allow-create clearable filterable>
                <el-option
                  v-for="item in fileList"
                  :key="item.documentCode"
                  :label="item.title"
                  :value="item.documentCode">
                </el-option>
              </el-select>
            </div>
          </div>
        </el-col>
        <el-col :span="24" style="margin-bottom: 16px;">
          <div class="search_thing">
            <div class="search_label">文件名称：</div>
            <div class="search_input"><el-input size="small" placeholder="请输入" clearable v-model="addInfo.documentName"></el-input></div>
          </div>
        </el-col>
        <el-col :span="24" style="margin-bottom: 16px;">
          <div class="search_thing">
            <div class="search_label">版号：</div>
            <div class="search_input"><el-input size="small" placeholder="请输入" clearable v-model="addInfo.documentVersion"></el-input></div>
          </div>
        </el-col>
        <el-col :span="24" style="margin-bottom: 16px;">
          <div class="search_thing">
            <div class="search_label">份数：</div>
            <div class="search_input"><el-input size="small" placeholder="请输入" clearable v-model="addInfo.pages"></el-input></div>
          </div>
        </el-col>
        <el-col :span="24" style="margin-bottom: 16px;">
          <div class="search_thing">
            <div class="search_label">文件类别：</div>
            <div class="search_input">
              <el-select v-model="addInfo.documentType" placeholder="请选择" size="small" style="width: 100%;">
                <el-option
                  v-for="item in fileType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
        </el-col>
        <el-col :span="24" style="margin-bottom: 16px;">
          <div class="search_thing">
            <div class="search_label">分发号：</div>
            <div class="search_input"><el-input size="small" placeholder="请输入" clearable v-model="addInfo.number"></el-input></div>
          </div>
        </el-col>
        <el-col :span="24" style="margin-bottom: 16px;">
          <div class="search_thing">
            <div class="search_label">接受人：</div>
            <div class="search_input">
              <el-select v-model="addInfo.receiveUser" placeholder="请选择" size="small" style="width: 100%;" filterable="">
                <el-option
                  v-for="item in personList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
        </el-col>
        <el-col :span="24" style="margin-bottom: 16px;">
          <div class="search_thing">
            <div class="search_label">接收部门：</div>
            <div class="search_input">
              <el-select v-model="addInfo.departLims" placeholder="请选择" size="small" style="width: 100%;">
                <el-option
                  v-for="item in list"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name">
                </el-option>
              </el-select>
            </div>
          </div>
        </el-col>
        <el-col :span="24" style="margin-bottom: 16px;">
          <div class="search_thing">
            <div class="search_label">接受日期：</div>
            <div class="search_input">
              <el-date-picker
                v-model="addInfo.receiveDate"
                type="date"
                size="small"
                placeholder="选择日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd" style="width: 100%;">
              </el-date-picker>
            </div>
          </div>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 æ¶ˆ</el-button>
        <el-button type="primary" @click="handleAdd" :loading="addLoading">ç¡® å®š</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ValueTable from '../tool/value-table.vue'
import {
        getYearAndMonthAndDays
    } from '../../util/date'
export default {
  components: {
    ValueTable
  },
  data(){
    return{
      addPower:true,
      outPower:true,
      upPower:true,
      outLoading:false,
      addLoading:false,
      componentData: {
        entity: {
          documentName: null,
          documentCode: null,
          orderBy: {
            field: 'id',
            order: 'desc'
          }
        },
        isIndex: true,
        showSelect: false,
        select: false,
        // selectMethod: 'handleChangeTask',
        do: [{
          id: 'delete',
          font: '删除',
          type: 'text',
          method: 'doDiy',
          disabFun: (row, index) => {
          return !!row.signedUser
          }
        }, {
          id: 'handleEdit',
          font: '修改',
          type: 'text',
          method: 'handleEdit',
          field:[],
          disabFun: (row, index) => {
          return !!row.signedUser
          }
        },{
          id: 'handleBack',
          font: '回收',
          type: 'text',
          method: 'handleBack',
          disabFun: (row, index) => {
          return !!row.signedUser
          }
        }],
        tagField: {
          // documentType:{
          //   select: []
          // },
          // receiveUserName:{
          //   select: []
          // },
        },
        selectField: {
          // documentType:{
          //   select: []
          // },
          // receiveUserName:{
          //   select: []
          // },
        },
        addUpload:['signatoryUrl'],
        requiredAdd: [],
        requiredUp: [],
        datePicker:['receiveDate'],
        noHead:['signedUserName','signedDate','departLims'],//不参与新增编辑的字段
        needSort: [],
        inputType:''
      },
      entityCopy: {},
      upIndex: 0,
      title:'新增',
      addDialogVisible:false,
      addInfo:{},
      personList:[],
      fileType:[],
      fileList:[],
      list:[]
    }
  },
  // ç”¨äºŽä¸Šä¼ æ–‡ä»¶çš„信息
  computed: {
    headers() {
      return {
        'token': sessionStorage.getItem('token')
      }
    },
    action() {
      return this.javaApi +this.$api.manageRecordIssueRecycle.exportInManageRecordIssueRecycle
    }
  },
  mounted() {
    this.entityCopy = this.HaveJson(this.componentData.entity);
    this.getPower()
    this.getAuthorizedPerson()
    this.selectEnumByCategory()
    this.getFileList()
    this.selectTreeList()
  },
  methods:{
    getPower(){
      let power = JSON.parse(sessionStorage.getItem('power'))
      let add = false
      let del = false
      let up = false;
      let out = false;
      let edit = false
      for (var i = 0; i < power.length; i++) {
        if (power[i].menuMethod == 'addManageRecordIssueRecycle') {
          add = true
        }
        if (power[i].menuMethod == 'delManageRecordIssueRecycle') {
          del = true
        }
        if (power[i].menuMethod == 'exportInManageRecordIssueRecycle') {
          up = true
        }
        if (power[i].menuMethod == 'doManageRecordIssueRecycle') {
          edit = true
        }
        if (power[i].menuMethod == 'exportOutManageRecordIssueRecycle') {
          out = true
        }
      }
      if (!add) {
        this.componentData.do.splice(2, 1)
      }
      if (!add) {
        this.componentData.do.splice(1, 1)
      }
      if (!del) {
        this.componentData.do.splice(0, 1)
      }
      this.addPower = add
      this.outPower = out
      this.upPower = up
    },
    // æ–°å¢ž
    openAdd(){
      // this.$refs.ValueTable.openAddDia(this.$api.manageRecordIssueRecycle.addManageRecordIssueRecycle);
      this.addInfo = {}
      this.title = '新增'
      this.addDialogVisible = true;
    },
    handleEdit(row){
      this.addInfo = row
      this.title = '编辑'
      this.addDialogVisible = true;
    },
    // å¯¼å‡º
    handleDown(){
      this.outLoading = true
      this.$axios.post(this.$api.manageRecordIssueRecycle.exportOutManageRecordIssueRecycle,{entity:this.componentData.entity},{headers: { 'Content-Type': 'application/json' }}).then(res => {
        this.outLoading = false
        if(res.code==201) return this.$message.error('导出失败')
        this.$message.success('导出成功')
        let url = this.javaApi+'word/'+res.message
        const link = document.createElement('a');
        link.href = url;
        link.download = '文件发放与回收记录';
        link.click();
      })
    },
    refreshTable() {
      this.$refs['ValueTable'].selectList()
    },
    refresh() {
      this.componentData.entity = this.HaveJson(this.entityCopy)
      this.upIndex++
      this.refreshTable()
    },
    getAuthorizedPerson() {
      this.$axios.get(this.$api.user.getUserMenu).then(res => {
        let data = []
        res.data.forEach(a => {
          data.push({
            label: a.name,
            value: a.id
          })
        })
        // this.componentData.tagField.receiveUserName.select = data
        // this.componentData.selectField.receiveUserName.select = data
        this.personList = data
      })
    },
    beforeUpload(file) {
      if (file.size > 1024 * 1024 * 10) {
        this.$message.error('上传文件不超过10M');
        this.$refs.upload.clearFiles()
        return false;
      } else {
        // this.upLoading = true;
        return true;
      }
    },
    onError(err, file, fileList) {
      this.$message.error('上传失败')
      this.$refs.upload.clearFiles()
    },
    handleSuccessUp(response) {
      this.upLoading = false;
      if (response.code == 200) {
        this.$message.success('上传成功');
        this.$refs['ValueTable'].selectList()
      }else{
        this.$message.error('上传失败');
      }
    },
    selectEnumByCategory() {
      this.$axios.post(this.$api.enums.selectEnumByCategory, {
        category: "文件类别"
      }).then(res => {
        // this.componentData.tagField.documentType.select = res.data
        // this.componentData.selectField.documentType.select = res.data
        this.fileType = res.data
      })
    },
    // èŽ·å–文件列表--文件清单
    getFileList(){
      this.$axios.post(this.$api.manageDocumentList.pageManageDocumentList,{
        entity: {
          orderBy: {
            field: 'createTime',
            order: 'desc'
          }
        },
        page:{
          current:-1,
          size:-1
        }
      },{headers: {
        'Content-Type': 'application/json'
      }}).then(res=>{
        this.fileList = res.data.body.records.map(m=>{
          m.title = m.documentCode
          return m
        })
      }).catch(err=>{})
    },
    getCurrentFile(e){
      let obj = this.fileList.find(m=>m.documentCode==e)
      if(obj){
        this.$set(this.addInfo,'documentName',obj.name)
        this.$set(this.addInfo,'documentVersion',obj.version)
        this.$set(this.addInfo,'documentType',obj.type)
      }
    },
    handleAdd(){
      if(!this.addInfo.documentCode) return this.$message.error('请输入文件编号')
      this.addLoading = true
      let obj = {}
      if(this.title=='新增'){
        obj = this.HaveJson(this.addInfo)
      }else{
        let {id,documentCode,documentName,documentVersion,pages,documentType,number,receiveUser,receiveDate,departLims} = this.addInfo
        obj = {id,documentCode,documentName,documentVersion,pages,documentType,number,receiveUser,receiveDate,departLims}
      }
      this.$axios.post(this.$api.manageRecordIssueRecycle[this.title=='新增'?'addManageRecordIssueRecycle':'doManageRecordIssueRecycle'], obj,{headers: { 'Content-Type': 'application/json' },noQs:true}).then(res => {
          this.addLoading = false
          if (res.code == 201) {
            return
          }
          this.addDialogVisible = false
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
          this.refreshTable()
        }).catch(err => {})
    },
    // å›žæ”¶
    handleBack(row){
      this.$confirm('是否确认回收?', "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let obj = {}
        let {id,documentCode,documentName,documentVersion,pages,documentType,number,receiveUser,receiveDate,departLims} = row
        obj = {id,documentCode,documentName,documentVersion,pages,documentType,number,receiveUser,receiveDate,departLims,signedDate:getYearAndMonthAndDays(),signedUser:JSON.parse(localStorage.getItem("user")).userId}
        this.$axios.post(this.$api.manageRecordIssueRecycle.doManageRecordIssueRecycle, obj,{headers: { 'Content-Type': 'application/json' },noQs:true}).then(res => {
          this.addLoading = false
          if (res.code == 201) {
            return
          }
          this.addDialogVisible = false
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
          this.refreshTable()
        }).catch(err => {})
      }).catch(() => {})
    },
    // æŸ¥è¯¢æ ‘形列表
    selectTreeList() {
      this.$axios.get(this.$api.personnel.selectCNSAPersonTree).then((res) => {
        this.list = res.data[0].children;
      });
    },
  }
}
</script>

<style scoped>
.title {
    height: 60px;
    line-height: 60px;
  }
  .search {
    background-color: #fff;
    height: 80px;
    display: flex;
    align-items: center;
  }

  .search_thing {
    width: 350px;
    display: flex;
    align-items: center;
  }

  .search_label {
    width: 110px;
    font-size: 14px;
    text-align: right;
  }

  .search_input {
    width: calc(100% - 110px);
  }

  .table {
    margin-top: 10px;
    background-color: #fff;
    width: calc(100% - 40px);
    height: calc(100% - 60px - 80px - 10px - 40px);
    padding: 20px;
  }
</style>

 src/components/view/a8-document-approval-records.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,394 @@
<template>
  <!-- æ–‡ä»¶å®¡æ‰¹è®°å½• -->
  <div class="DocumentApprovalRecords">
    <el-row class="title">
      <el-col :span="12" style="padding-left: 20px;text-align: left;">文件审批记录</el-col>
      <el-col :span="12" style="text-align: right;">
        <el-button size="medium" type="primary" @click="openAdd" v-if="addPower">新增</el-button>
        <el-upload :action="action" :multiple="false"
              :show-file-list="false"
          accept='.doc,.docx' :headers="headers" :on-change="beforeUpload"
          :on-error="onError" ref='upload' v-if="upPower" :on-success="handleSuccessUp" style="display:inline-block;margin-left: 20px;">
          <el-button type="primary" size="medium">导入</el-button></el-upload>
        <el-button size="medium" type="primary" @click="handleDown" :loading="outLoading" v-if="outPower" style="display:inline-block;margin-left: 20px;">导出</el-button>
      </el-col>
    </el-row>
    <div class="search">
      <div class="search_thing">
        <div class="search_label">文件名称：</div>
        <div class="search_input"><el-input size="small" placeholder="请输入" clearable v-model="componentData.entity.documentName"
            @keyup.enter.native="refreshTable()"></el-input></div>
      </div>
      <div class="search_thing">
        <div class="search_label">文件编号：</div>
        <div class="search_input">
          <el-input size="small" placeholder="请输入" clearable v-model="componentData.entity.documentCode"
            @keyup.enter.native="refreshTable()"></el-input>
        </div>
      </div>
      <div class="search_thing" style="padding-left: 30px;">
        <el-button size="small" @click="refresh()">重 ç½®</el-button>
        <el-button size="small" type="primary" @click="refreshTable()">查 è¯¢</el-button>
      </div>
    </div>
    <div class="table">
      <ValueTable ref="ValueTable" :url="$api.manageRecordCheck.pageManageRecordCheck"
        :delUrl="$api.manageRecordCheck.delManageRecordCheck"
        :componentData="componentData" :dateFormat="'yyyy-MM-dd'" :upUrl="$api.manageRecordCheck.doManageRecordCheck" :key="upIndex"/>
    </div>
  </div>
</template>

<script>
import ValueTable from '../tool/value-table.vue'
export default {
  components: {
    ValueTable
  },
  data(){
    return{
      addPower:true,
      outPower:true,
      upPower:true,
      outLoading:false,
      componentData: {
        entity: {
          documentName: null,
          documentCode: null,
          orderBy: {
            field: 'id',
            order: 'desc'
          }
        },
        init:false,
        isIndex: true,
        showSelect: false,
        select: false,
        // selectMethod: 'handleChangeTask',
        do: [{
          id: 'delete',
          font: '删除',
          type: 'text',
          method: 'doDiy',
          disabFun: (row, index) => {
          return row.checkState=='通过'||row.ratifyState=='通过'
          }
        }, {
          id: 'update',
          font: '修改',
          type: 'text',
          method: 'doDiy',
          field:[],
          disabFun: (row, index) => {
          return row.checkState=='通过'||row.ratifyState=='通过'
          }
        },{
          id: 'handleCheck',
          font: '审核',
          type: 'text',
          method: 'handleCheck',
          disabFun: (row, index) => {
          return row.checkState=='通过'||row.ratifyState=='通过'
          }
        },{
          id: 'handleApproval',
          font: '批准',
          type: 'text',
          method: 'handleApproval',
          disabFun: (row, index) => {
          return row.ratifyState=='通过'
          }
        }],
        tagField: {
          writeUser:{
            select: []
          },
          checkUser:{
            select: []
          },
          ratifyUser:{
            select: []
          },
        },
        selectField: {
          writeUser:{
            select: []
          },
          checkUser:{
            select: []
          },
          ratifyUser:{
            select: []
          },
        },
        addUpload:['signatoryUrl'],
        requiredAdd: [],
        requiredUp: [],
        datePicker:['ratifyDate'],
        needSort: [],
        inputType:''
      },
      entityCopy: {},
      upIndex: 0,
    }
  },
  // ç”¨äºŽä¸Šä¼ æ–‡ä»¶çš„信息
  computed: {
    headers() {
      return {
        'token': sessionStorage.getItem('token')
      }
    },
    action() {
      return this.javaApi +this.$api.manageRecordCheck.exportInManageRecordCheck
    }
  },
  mounted() {
    this.entityCopy = this.HaveJson(this.componentData.entity);
    this.getPower()
    this.getAuthorizedPerson()
  },
  methods:{
    getPower(){
      let power = JSON.parse(sessionStorage.getItem('power'))
      let add = false
      let del = false
      let up = false;
      let out = false;
      let check = false
      let ratify = false
      for (var i = 0; i < power.length; i++) {
        if (power[i].menuMethod == 'addManageRecordCheck') {
          add = true
        }
        if (power[i].menuMethod == 'delManageRecordCheck') {
          del = true
        }
        if (power[i].menuMethod == 'exportInManageRecordCheck') {
          up = true
        }
        if (power[i].menuMethod == 'checkManageRecordCheck') {
          check = true
        }
        if (power[i].menuMethod == 'ratifyManageRecordCheck') {
          ratify = true
        }
        if (power[i].menuMethod == 'exportOutManageRecordCheck') {
          out = true
        }
      }
      if (!ratify) {
        this.componentData.do.splice(3, 1)
      }
      if (!check) {
        this.componentData.do.splice(2, 1)
      }
      if (!add) {
        this.componentData.do.splice(1, 1)
      }
      if (!del) {
        this.componentData.do.splice(0, 1)
      }
      this.addPower = add
      this.outPower = out
      this.upPower = up
    },
    // æ–°å¢ž
    openAdd(){
      this.$refs.ValueTable.openAddDia(this.$api.manageRecordCheck.addManageRecordCheck);
    },
    // å¯¼å‡º
    handleDown(){
      this.outLoading = true
      this.$axios.post(this.$api.manageRecordCheck.exportOutManageRecordCheck,{entity:this.componentData.entity},{headers: { 'Content-Type': 'application/json' }}).then(res => {
        this.outLoading = false
        if(res.code==201) return this.$message.error('导出失败')
        this.$message.success('导出成功')
        let url = this.javaApi+'word/'+res.message
        const link = document.createElement('a');
        link.href = url;
        link.download = '文件审批记录';
        link.click();
      })
    },
    refreshTable() {
      this.$refs['ValueTable'].selectList()
    },
    refresh() {
      this.componentData.entity = this.HaveJson(this.entityCopy)
      // this.upIndex++
      this.refreshTable()
    },
    getAuthorizedPerson() {
      this.$axios.get(this.$api.user.getUserMenu).then(res => {
        let data = []
        res.data.forEach(a => {
          data.push({
            label: a.name,
            value: a.id
          })
        })
        this.componentData.tagField.writeUser.select = data
        this.componentData.selectField.writeUser.select = data
        this.componentData.tagField.checkUser.select = data
        this.componentData.selectField.checkUser.select = data
        this.componentData.tagField.ratifyUser.select = data
        this.componentData.selectField.ratifyUser.select = data
        this.$refs['ValueTable'].selectList()
      })
    },
    // å®¡æ ¸
    handleCheck(row){
      this.$confirm('是否审核通过?', '提示', {
        confirmButtonText: '通过',
        cancelButtonText: '不通过',
        type: 'warning',
        closeOnClickModal: false, // ç¦æ­¢ç‚¹å‡»é®ç½©å±‚关闭
        distinguishCancelAndClose: true,
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            // ç‚¹å‡»â€œç¡®å®šâ€æŒ‰é’®ï¼Œå…è®¸å…³é—­
            this.$axios.post(this.$api.manageRecordCheck.checkManageRecordCheck, {id:row.id,checkState:'通过'}).then(res => {
              if (res.code === 201) return
              this.refreshTable()
              done();
              this.$message({
                type: 'success',
                message: '提交成功'
              })
            })
            .catch(err => {

            })
          } else if (action === 'cancel') {
            // ç‚¹å‡»â€œå–消”按钮，不允许关闭
            this.$axios.post(this.$api.manageRecordCheck.checkManageRecordCheck, {id:row.id,checkState:'不通过'}).then(res => {
              if (res.code === 201) return
              this.refreshTable()
              done();
              this.$message({
                type: 'success',
                message: '提交成功'
              })
            })
            .catch(err => {

            })
            console.log("取消按钮点击事件，不关闭弹框");
          } else if (action === 'close') {
            // ç‚¹å‡»â€œÃ—”按钮，不允许关闭
            done();
            console.log("×按钮点击事件，不关闭弹框");
          }
          }
      })
    },
    // æ‰¹å‡†
    handleApproval(row){
      this.$confirm('是否批准通过?', '提示', {
        confirmButtonText: '通过',
        cancelButtonText: '不通过',
        type: 'warning',
        closeOnClickModal: false, // ç¦æ­¢ç‚¹å‡»é®ç½©å±‚关闭
        distinguishCancelAndClose: true,
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            // ç‚¹å‡»â€œç¡®å®šâ€æŒ‰é’®ï¼Œå…è®¸å…³é—­
            this.$axios.post(this.$api.manageRecordCheck.ratifyManageRecordCheck, {id:row.id,ratifyState:'通过'}).then(res => {
              if (res.code === 201) return
              this.refreshTable()
              done();
              this.$message({
                type: 'success',
                message: '提交成功'
              })
            })
            .catch(err => {

            })
          } else if (action === 'cancel') {
            // ç‚¹å‡»â€œå–消”按钮，不允许关闭
            this.$axios.post(this.$api.manageRecordCheck.ratifyManageRecordCheck, {id:row.id,ratifyState:'不通过'}).then(res => {
              if (res.code === 201) return
              this.refreshTable()
              done();
              this.$message({
                type: 'success',
                message: '提交成功'
              })
            })
            .catch(err => {

            })
            console.log("取消按钮点击事件，不关闭弹框");
          } else if (action === 'close') {
            // ç‚¹å‡»â€œÃ—”按钮，不允许关闭
            done();
            console.log("×按钮点击事件，不关闭弹框");
          }
          }
        })
    },
    beforeUpload(file) {
      if (file.size > 1024 * 1024 * 10) {
        this.$message.error('上传文件不超过10M');
        this.$refs.upload.clearFiles()
        return false;
      } else {
        // this.upLoading = true;
        return true;
      }
    },
    onError(err, file, fileList) {
      this.$message.error('上传失败')
      this.$refs.upload.clearFiles()
    },
    handleSuccessUp(response) {
      this.upLoading = false;
      if (response.code == 200) {
        this.$message.success('上传成功');
        this.$refs['ValueTable'].selectList()
      }else{
        this.$message.error('上传失败');
      }
    },
  }
}
</script>

<style scoped>
.title {
    height: 60px;
    line-height: 60px;
  }
  .search {
    background-color: #fff;
    height: 80px;
    display: flex;
    align-items: center;
  }

  .search_thing {
    width: 350px;
    display: flex;
    align-items: center;
  }

  .search_label {
    width: 110px;
    font-size: 14px;
    text-align: right;
  }

  .search_input {
    width: calc(100% - 110px);
  }

  .table {
    margin-top: 10px;
    background-color: #fff;
    width: calc(100% - 40px);
    height: calc(100% - 60px - 80px - 10px - 40px);
    padding: 20px;
  }
</style>

 src/components/view/a8-document-revision-request-approval-records.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,856 @@
<template>
  <!-- æ–‡ä»¶ä¿®è®¢ç”³è¯·å®¡æ‰¹è®°å½• -->
  <div class="DocumentRevisionRequestApprovalRecords">
    <el-row class="title">
      <el-col :span="12" style="padding-left: 20px;text-align: left;">文件修订申请审批记录</el-col>
      <el-col :span="12" style="text-align: right;">
        <el-button size="medium" type="primary" @click="openAdd" v-if="addPower">新增</el-button>
        <!-- <el-upload :action="action" :show-file-list="false"
          accept='.doc,.docx' :headers="headers" :on-change="beforeUpload"
          :on-error="onError" ref='upload' v-if="upPower" :on-success="handleSuccessUp" style="display:inline-block;margin-left: 20px;">
          <el-button type="primary" size="medium">导入</el-button></el-upload> -->
        <el-button size="medium" type="primary" @click="handleDown" :loading="outLoading" v-if="outPower" style="display:inline-block;margin-left: 20px;">导出</el-button>
      </el-col>
    </el-row>
    <div class="search">
      <!-- <div class="search_thing">
        <div class="search_label">文件名称：</div>
        <div class="search_input"><el-input size="small" placeholder="请输入" clearable v-model="componentData.entity.documentName"
            @keyup.enter.native="refreshTable()"></el-input></div>
      </div> -->
      <div class="search_thing">
        <div class="search_label">文件编号：</div>
        <div class="search_input">
          <el-input size="small" placeholder="请输入" clearable v-model="componentData.entity.documentCode"
            @keyup.enter.native="refreshTable()"></el-input>
        </div>
      </div>
      <div class="search_thing" style="padding-left: 30px;">
        <el-button size="small" @click="refresh()">重 ç½®</el-button>
        <el-button size="small" type="primary" @click="refreshTable()">查 è¯¢</el-button>
      </div>
    </div>
    <div class="table">
      <ValueTable ref="ValueTable" :url="$api.manageRecordAudit.pageManageRecordAudit"
        :delUrl="$api.manageRecordAudit.delManageRecordAudit"
        :componentData="componentData" :upUrl="$api.manageRecordIssueRecycle.doManageRecordIssueRecycle" :key="upIndex"/>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="addDialogVisible"
      width="800px" top="6vh">
      <el-row>
        <el-col :span="12" style="margin-bottom: 16px;">
          <div class="search_thing">
            <div class="search_label">申请类型：</div>
            <div class="search_input">
              <el-radio-group v-model="addInfo.method" size="small" :disabled="title.includes('意见')">
                <el-radio label="修订">修订</el-radio>
                <el-radio label="作废">作废</el-radio>
              </el-radio-group>
            </div>
          </div>
        </el-col>
        <el-col :span="12" style="margin-bottom: 16px;">
          <div class="search_thing">
            <div class="search_label"><span style="color: red;margin-left: 4px;">* </span>文件编号：</div>
            <div class="search_input">
              <el-select v-model="addInfo.documentCode" size="small" style="width: 100%;" @change="getCurrentFile" allow-create clearable filterable :disabled="title.includes('意见')">
                <el-option
                  v-for="item in fileList"
                  :key="item.documentCode"
                  :label="item.title"
                  :value="item.documentCode">
                </el-option>
              </el-select>
            </div>
          </div>
        </el-col>
        <el-col :span="12" style="margin-bottom: 16px;">
          <div class="search_thing">
            <div class="search_label">文件名称：</div>
            <div class="search_input"><el-input size="small" placeholder="请输入" clearable v-model="addInfo.documentName" :disabled="title.includes('意见')"></el-input></div>
          </div>
        </el-col>
        <el-col :span="12" style="margin-bottom: 16px;">
          <div class="search_thing">
            <div class="search_label">章节号：</div>
            <div class="search_input"><el-input size="small" placeholder="请输入" clearable v-model="addInfo.capter" :disabled="title.includes('意见')"></el-input></div>
          </div>
        </el-col>
        <el-col :span="12" style="margin-bottom: 16px;">
          <div class="search_thing">
            <div class="search_label">页码：</div>
            <div class="search_input"><el-input size="small" placeholder="请输入" clearable v-model="addInfo.pages" :disabled="title.includes('意见')"></el-input></div>
          </div>
        </el-col>
        <el-col :span="12" style="margin-bottom: 16px;">
          <div class="search_thing">
            <div class="search_label">修改次数：</div>
            <div class="search_input"><el-input size="small" placeholder="请输入" clearable v-model="addInfo.number" :disabled="title.includes('意见')"></el-input></div>
          </div>
        </el-col>
        <el-col :span="12" style="margin-bottom: 16px;">
          <div class="search_thing">
            <div class="search_label">修改前版本号：</div>
            <div class="search_input"><el-input size="small" placeholder="请输入" clearable v-model="addInfo.beforeVersion" :disabled="title.includes('意见')"></el-input></div>
          </div>
        </el-col>
        <el-col :span="12" style="margin-bottom: 16px;">
          <div class="search_thing">
            <div class="search_label">修改后版本号：</div>
            <div class="search_input"><el-input size="small" placeholder="请输入" clearable v-model="addInfo.afterVersion" :disabled="title.includes('意见')"></el-input></div>
          </div>
        </el-col>
        <el-col :span="12" style="margin-bottom: 16px;">
          <div class="search_thing">
            <div class="search_label">修订人：</div>
            <div class="search_input">
              <el-select v-model="addInfo.alterUser" placeholder="请选择" size="small" style="width: 100%;" filterable :disabled="title.includes('意见')">
                <el-option
                  v-for="item in personList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
        </el-col>
        <el-col :span="12" style="margin-bottom: 16px;">
          <div class="search_thing">
            <div class="search_label">原分发部门：</div>
            <div class="search_input">
              <el-select v-model="addInfo.beforeDepart" placeholder="请选择" size="small" style="width: 100%;" :disabled="title.includes('意见')">
                <el-option
                  v-for="item in list"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name">
                </el-option>
              </el-select>
            </div>
          </div>
        </el-col>
        <el-col :span="12" style="margin-bottom: 16px;">
          <div class="search_thing">
            <div class="search_label">修订后分发部门：</div>
            <div class="search_input">
              <el-select v-model="addInfo.afterDepart" placeholder="请选择" size="small" style="width: 100%;" :disabled="title.includes('意见')">
                <el-option
                  v-for="item in list"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name">
                </el-option>
              </el-select>
            </div>
          </div>
        </el-col><el-col :span="12" style="margin-bottom: 16px;">
          <div class="search_thing">
            <div class="search_label">日期：</div>
            <div class="search_input">
              <el-date-picker
                v-model="addInfo.date"
                type="date"
                size="small"
                placeholder="选择日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd" style="width: 100%;">
              </el-date-picker>
            </div>
          </div>
        </el-col>
        <el-col :span="24" style="margin-bottom: 16px;">
          <div class="search_thing" style="width: 90%;">
            <div class="search_label">修改内容：</div>
            <div class="search_input"><el-input size="small" placeholder="请输入" clearable v-model="addInfo.alterThing" type="textarea"
              :rows="2" :disabled="title.includes('意见')"></el-input></div>
          </div>
        </el-col>
        <el-col :span="24" style="margin-bottom: 16px;">
          <div class="search_thing" style="width: 90%;">
            <div class="search_label">变化原因：</div>
            <div class="search_input"><el-input size="small" placeholder="请输入" clearable v-model="addInfo.reason" type="textarea"
              :rows="2" :disabled="title.includes('意见')"></el-input></div>
          </div>
        </el-col>
        <el-col :span="12" style="margin-bottom: 16px;">
          <div class="search_thing">
            <div class="search_label">上传附件：</div>
            <div class="search_input"><el-upload
            style="margin: 8px 0 0px 50px;"
              action="#"
              :auto-upload="false"
              :multiple="false"
              accept='.pdf' :on-change="handleChangeUpload" v-if="addDialogVisible&&!title.includes('意见')">
              <el-button size="small" type="primary">上传附件</el-button>
            </el-upload></div>
          </div>
        </el-col>
        <el-col :span="12" style="margin-bottom: 16px;" v-if="title.includes('意见')">
          <div class="search_thing">
            <div class="search_label">申请部门主管意见：</div>
            <div class="search_input"><el-input size="small" placeholder="请输入" clearable v-model="addInfo.applicant" type="textarea"
              :rows="2" :disabled="title!='申请部门主管意见'"></el-input></div>
          </div>
        </el-col>
        <el-col :span="12" style="margin-bottom: 16px;" v-if="title.includes('意见')">
          <div class="search_thing">
            <div class="search_label">原定制部门意见：</div>
            <div class="search_input"><el-input size="small" placeholder="请输入" clearable v-model="addInfo.formulation" type="textarea"
              :rows="2" :disabled="title!='原定制部门意见'"></el-input></div>
          </div>
        </el-col>
        <el-col :span="12" style="margin-bottom: 16px;" v-if="title.includes('意见')">
          <div class="search_thing">
            <div class="search_label">原审核部门意见：</div>
            <div class="search_input"><el-input size="small" placeholder="请输入" clearable v-model="addInfo.audit" type="textarea"
              :rows="2" :disabled="title!='原审核部门意见'"></el-input></div>
          </div>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 æ¶ˆ</el-button>
        <el-button type="primary" @click="handleAdd" :loading="addLoading">ç¡® å®š</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :title="title0"
      :visible.sync="detailDialogVisible" width="900px" top="20px" :class="{downPdf:title0=='下载'}" :modal="title0!='下载'">
      <div style="max-height: 75vh;overflow-y: auto;">
        <div id="dialogBody">
          <h4 style="display: flex;align-items: center;flex-direction: column;justify-content: center;">
            <span style="font-size: 20px;">文件更改/作废申请表</span>
            <span>Application for alteration/cancellation of Document</span>
          </h4>
          <p style="display: flex;justify-content: space-between;margin-top: 16px;">
            <span>{{ currentInfo.documentCode }}</span>
            <span>{{currentInfo.method}}</span>
          </p>
          <table border="1" class="tables" cellpadding="10">
            <tr>
              <td>
                <p>申请部门</p>
                <p class="en">Application department</p>
              </td>
              <td>{{ currentInfo.createUserDepart }}</td>
              <td>
                <p>申请人</p>
                <p>Proposer</p>
              </td>
              <td>{{ currentInfo.createUserName }}</td>
              <td >
                <p>申请时间</p>
                <p class="en">Application date</p>
              </td>
              <td>{{ currentInfo.createTime }}</td>
            </tr>
            <tr>
              <td>
                <p>文件名称</p>
                <p class="en">File name</p>
              </td>
              <td colspan="3">{{ currentInfo.documentName }}</td>
              <td>
                <p>文件编号</p>
                <p class="en">Document number</p>
              </td>
              <td>{{ currentInfo.documentCode }}</td>
            </tr>
            <tr>
              <td>
                <p>修改前版次</p>
                <p class="en">Modify previous editions</p>
              </td>
              <td colspan="2">{{ currentInfo.beforeVersion }}</td>
              <td >
                <p>修改后版次</p>
                <p class="en">Revised edition</p>
              </td>
              <td colspan="2">{{ currentInfo.afterVersion }}</td>
            </tr>
            <tr>
              <td>
                <p>变化原因</p>
                <p class="en">Changing reason</p>
              </td>
              <td colspan="5">
                <div class="user-content">
                  <p  style="text-align: left;line-height: 26px;">{{ currentInfo.reason }}</p>
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <p>原文内容</p>
                <p class="en">Original content</p>
              </td>
              <td colspan="2">见附件</td>
              <td >
                <p>拟修订内容</p>
                <p class="en">Content be revised</p>
              </td>
              <td colspan="2">{{ currentInfo.alterThing }}</td>
            </tr>
            <tr>
              <td>
                <p>修订后分发部门</p>
                <p class="en">Distribute to the department after revision</p>
              </td>
              <td colspan="2">{{ currentInfo.afterDepart }}</td>
              <td >
                <p>原分放部门</p>
                <p class="en">The original distribution department</p>
              </td>
              <td colspan="2">{{ currentInfo.beforeDepart }}</td>
            </tr>
            <tr>
              <td>
                <p>申请部门主管意见</p>
                <p class="en">Opinion of the head of the applicant department</p>
              </td>
              <td colspan="2">
                <p>原制定部门意见</p>
                <p class="en">Original formulation of the department's opinion</p>
              </td>
              <td colspan="2">
                <p>原审核部门意见</p>
                <p class="en">Opinion of the original audit department</p>
              </td>
              <td>
                <p>批准</p>
                <p class="en">Ratify</p>
              </td>
            </tr>
            <tr>
              <td>
                {{ currentInfo.applicant }}
              </td>
              <td colspan="2">
                {{ currentInfo.formulation }}
              </td>
              <td colspan="2">
                {{ currentInfo.audit }}
              </td>
              <td>
                <img :src="javaApi+'img/'+currentInfo.ratifyUserUrl" style="width: 100%;" alt="批准人签名">
              </td>
            </tr>
          </table>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="文件预览"
      :visible.sync="lookDialogVisible"
      width="800px" top="5vh" fullscreen>
      <h4>修订内容</h4>
      <filePreview v-if="lookDialogVisible" :fileUrl="javaApi+'/word/'+currentInfo.afterUrl"
      :currentFile="{}"/>
      <h4>原内容</h4>
      <filePreview v-if="lookDialogVisible" :fileUrl="javaApi+'/word/'+currentInfo.beforeUrl"
      :currentFile="{}"/>
    </el-dialog>
  </div>
</template>

<script>
import ValueTable from '../tool/value-table.vue'
import {exportHtmlToPDF} from '../../util/downHtmlToPDF'
import filePreview from '../tool/file-preview.vue'
export default {
  components: {
    ValueTable,
    filePreview
  },
  data () {
    return {
      addPower:true,
      outPower:true,
      outLoading:false,
      lookDialogVisible:false,
      addLoading:false,
      componentData: {
        entity: {
          // documentName: null,
          documentCode: null,
          orderBy: {
            field: 'createTime',
            order: 'desc'
          }
        },
        isIndex: true,
        showSelect: false,
        select: false,
        // selectMethod: 'handleChangeTask',
        do: [{
          id: 'handleLook',
          font: '查看',
          type: 'text',
          method: 'handleLook'
        }, {
          id: 'handleLook0',
          font: '文件预览',
          type: 'text',
          method: 'handleLook0'
        }, {
          id: 'handleOut',
          font: '下载',
          type: 'text',
          method: 'handleOut'
        }, {
          id: 'delete',
          font: '删除',
          type: 'text',
          method: 'doDiy',
          disabFun: (row, index) => {
          return !!row.ratifyUser
          }
        }, {
          id: 'handleEdit',
          font: '修改',
          type: 'text',
          method: 'handleEdit',
          field:[],
          disabFun: (row, index) => {
          return !!row.ratifyUser
          }
        }, {
          id: 'handleRatify',
          font: '批准',
          type: 'text',
          method: 'handleRatify',
          field:[],
          disabFun: (row, index) => {
            return !!row.ratifyUser
          }
        }, {
          id: 'handlework0',
          font: '申请意见',
          type: 'text',
          method: 'handlework0',
          field:[],
          disabFun: (row, index) => {
            return !!row.ratifyUser
          }
        }, {
          id: 'handlework1',
          font: '原定制意见',
          type: 'text',
          method: 'handlework1',
          field:[],
          disabFun: (row, index) => {
          return !!row.ratifyUser
          }
        }, {
          id: 'handlework2',
          font: '原审核意见',
          type: 'text',
          method: 'handlework2',
          field:[],
          disabFun: (row, index) => {
          return !!row.ratifyUser
          }
        }],
        tagField: {
          // documentType:{
          //   select: []
          // },
          // receiveUserName:{
          //   select: []
          // },
        },
        selectField: {
          // documentType:{
          //   select: []
          // },
          // receiveUserName:{
          //   select: []
          // },
        },
        addUpload:['signatoryUrl'],
        requiredAdd: [],
        requiredUp: [],
        datePicker:['receiveDate'],
        noHead:['signedUserName','signedDate','departLims'],//不参与新增编辑的字段
        needSort: [],
        inputType:''
      },
      entityCopy: {},
      upIndex: 0,
      title:'新增',
      addInfo:{
        method:'修订',
      },
      addDialogVisible:false,
      detailDialogVisible:false,
      fileList:[],
      personList:[],
      list:[],
      file:null,
      title0:'查看',
      currentInfo:{},
    }
  },
  mounted(){
    this.entityCopy = this.HaveJson(this.componentData.entity);
    this.getPower()
    this.getFileList()
    this.getAuthorizedPerson()
    this.selectTreeList()
  },
  methods:{
    getPower(){
      let power = JSON.parse(sessionStorage.getItem('power'))
      let add = false
      let del = false
      let out = false;
      let ratify = false
      let audit1 = false
      let audit2 = false
      let audit3 = false
      for (var i = 0; i < power.length; i++) {
        if (power[i].menuMethod == 'addManageRecordAudit') {
          add = true
        }
        if (power[i].menuMethod == 'delManageRecordAudit') {
          del = true
        }
        if (power[i].menuMethod == 'ratifyManageRecordAudit') {
          ratify = true
        }
        if (power[i].menuMethod == 'exportOutManageRecordAudit') {
          out = true
        }
        if (power[i].menuMethod == 'manageRecordAudit1') {
          audit1 = true
        }
        if (power[i].menuMethod == 'manageRecordAudit2') {
          audit2 = true
        }
        if (power[i].menuMethod == 'manageRecordAudit3') {
          audit3 = true
        }
      }
      if (!audit3) {
        this.componentData.do.splice(8, 1)
      }
      if (!audit2) {
        this.componentData.do.splice(7, 1)
      }
      if (!audit1) {
        this.componentData.do.splice(6, 1)
      }
      if (!ratify) {
        this.componentData.do.splice(5, 1)
      }
      if (!add) {
        this.componentData.do.splice(4, 1)
      }
      if (!del) {
        this.componentData.do.splice(3, 1)
      }
      this.addPower = add
      this.outPower = out
    },
    openAdd(){
      this.addInfo = {
        method:'修订',
      }
      this.title = '新增'
      this.addDialogVisible = true;
    },
    // å¯¼å‡º
    handleDown(){
      this.outLoading = true
      this.$axios.post(this.$api.manageRecordAudit.exportOutManageRecordAudit,{entity:this.componentData.entity},{headers: { 'Content-Type': 'application/json' }}).then(res => {
        this.outLoading = false
        if(res.code==201) return this.$message.error('导出失败')
        this.$message.success('导出成功')
        let url = this.javaApi+'word/'+res.message
        const link = document.createElement('a');
        link.href = url;
        link.download = '文件修订表';
        link.click();
      })
    },
    refreshTable() {
      this.$refs['ValueTable'].selectList()
    },
    refresh() {
      this.componentData.entity = this.HaveJson(this.entityCopy)
      this.upIndex++
      this.refreshTable()
    },
    // èŽ·å–文件列表--文件清单
    getFileList(){
      this.$axios.post(this.$api.manageDocumentList.pageManageDocumentList,{
        entity: {
          orderBy: {
            field: 'createTime',
            order: 'desc'
          }
        },
        page:{
          current:-1,
          size:-1
        }
      },{headers: {
        'Content-Type': 'application/json'
      }}).then(res=>{
        this.fileList = res.data.body.records.map(m=>{
          m.title = m.documentCode
          return m
        })
      }).catch(err=>{})
    },
    getCurrentFile(e){},
    handleAdd(){
      if(!this.addInfo.documentCode) return this.$message({type:'error',message:"请输入文件编号"})
      if(!this.addInfo.id){
        // æ–°å¢ž
        let fd = new FormData();
        //文件信息中raw才是真的文件
        if(this.file){
          fd.append("file",this.file.raw);
        }
        for (let m in this.addInfo){
          fd.append(m,this.addInfo[m])
        }
        this.addLoading = true
        this.$axios.post(this.$api.manageRecordAudit.addManageRecordAudit, fd,{
            headers: {
              'Content-Type': 'multipart/form-data'
            },
            noQs:true
          }).then(res => {
            this.addLoading = false
          if (res.code == 200) {
            this.$message({
              type: 'success',
              message: '添加成功'
            })
            this.refreshTable()
            this.addDialogVisible = false
          } else {
            this.$message({
              type: 'error',
              message: '添加失败'
            })
          }
        })
      }else{
        // ä¿®æ”¹
        let {id,method,documentCode,documentName,capter,pages,beforeVersion,afterVersion,alterUser,alterThing,reason,beforeDepart,afterDepart,number,applicant,formulation,audit,date} = this.addInfo
        let fd = new FormData();
        //文件信息中raw才是真的文件
        if(this.file){
          fd.append("file",this.file.raw);
        }
        let obj = {id,method,documentCode,documentName,capter,pages,beforeVersion,afterVersion,alterUser,alterThing,reason,beforeDepart,afterDepart,number,applicant,formulation,audit,date}
        for (let m in obj){
          if(this.addInfo[m]){
            fd.append(m,this.addInfo[m])
          }
        }
        this.addLoading = true
        this.$axios.post(this.$api.manageRecordAudit.doManageRecordAudit, fd,{
            headers: {
              'Content-Type': 'multipart/form-data'
            },
            noQs:true
          }).then(res => {
            this.addLoading = false
          if (res.code == 200) {
            this.refreshTable()
            this.addDialogVisible = false
          } else {
            this.$message({
              type: 'error',
              message: '添加失败'
            })
          }
        })
      }
    },
    getAuthorizedPerson() {
      this.$axios.get(this.$api.user.getUserMenu).then(res => {
        let data = []
        res.data.forEach(a => {
          data.push({
            label: a.name,
            value: a.id
          })
        })
        // this.componentData.tagField.receiveUserName.select = data
        // this.componentData.selectField.receiveUserName.select = data
        this.personList = data
      })
    },
    // æŸ¥è¯¢æ ‘形列表
    selectTreeList() {
      this.$axios.get(this.$api.personnel.selectCNSAPersonTree).then((res) => {
        this.list = res.data[0].children;
      });
    },
    handleChangeUpload(file, fileLists){
      this.file = file
      // this.$set(this.addInfo,'name',file.name)
    },
    handleEdit(row){
      this.addInfo = row
      this.title = '修改'
      this.addDialogVisible = true;
    },
    // å®¡æ‰¹
    handleRatify(row){
      this.$confirm('是否批准通过?', '批准', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$axios
            .post(this.$api.manageRecordAudit.ratifyManageRecordAudit,{id:row.id})
            .then(res => {
              if (res.code === 201) {
                return;
              }
              this.$message.success('操作成功');
              this.refreshTable();
            })
            .catch(e => {
              this.$message.error('操作失败');
            });
        })
        .catch(() => {
        });
    },
    handlework0(row){
      this.addInfo = row
      this.title = '申请部门主管意见'
      this.addDialogVisible = true;
    },
    handlework1(row){
      this.addInfo = row
      this.title = '原定制部门意见'
      this.addDialogVisible = true;
    },
    handlework2(row){
      this.addInfo = row
      this.title = '原审核部门意见'
      this.addDialogVisible = true;
    },
    handleLook(row){
      this.title0 = '查看'
      this.currentInfo = row
      this.detailDialogVisible = true;
    },
    handleOut(row){
      this.currentInfo = row
      this.title0 = '下载'
      this.detailDialogVisible = true;
      setTimeout(() => {
        this.$nextTick(() => {
          const element = document.getElementById("dialogBody");
          exportHtmlToPDF(element,'文件'+row.method+'申请表').then(res=>{
            this.detailDialogVisible = false;
          })
        })
      }, 500);
    },
    handleLook0(row){
      this.currentInfo = row;
      this.lookDialogVisible = true
    }
  }
}
</script>

<style scoped>
.title {
    height: 60px;
    line-height: 60px;
  }
  .search {
    background-color: #fff;
    height: 80px;
    display: flex;
    align-items: center;
  }

  .search_thing {
    width: 350px;
    display: flex;
    align-items: center;
  }

  .search_label {
    width: 110px;
    font-size: 14px;
    text-align: right;
  }

  .search_input {
    width: calc(100% - 110px);
  }

  .table {
    margin-top: 10px;
    background-color: #fff;
    width: calc(100% - 40px);
    height: calc(100% - 60px - 80px - 10px - 40px);
    padding: 20px;
  }
  .tables {
    table-layout: fixed;
    width: 100%;
    margin-top: 10px;
  }

  .tables td {
    height: 40px;
    width: 100px;
    text-align: center;
    font-size: 14px;
    word-wrap: break-word;
    white-space: normal;
  }
  .en{
    font-size: 12px;
    word-break: break-word; /* è‡ªåŠ¨æ–­è¡Œ */
    overflow-wrap: break-word; /* é˜²æ­¢æº¢å‡º */
    white-space: normal; /* é»˜è®¤æ¢è¡Œ */
  }

  .heads td {
    border: 1px dashed black; /* å•å…ƒæ ¼çš„虚线 */
    padding: 8px;
    text-align: left;
  }
  .downPdf{
    opacity: 0 !important;
  }
  h4.title{
    position: relative;
    height: 30px;
    line-height: 30px;
    box-sizing: border-box;
    padding-left: 16px;
    margin-left: 10px;
    margin-bottom: 10px;
  }
  h4.title::after{
    content: '';
    width: 4px;
    height: 20px;
    background: #3A7BFA;
    position: absolute;
    top: 5px;
    left: 0;
  }
  >>>.el-dialog__body{
    height: auto;
  }
</style>

 src/components/view/a8-external-document-confirmation-records.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,377 @@
<template>
  <!-- å¤–来文件确认记录 -->
  <div class="ExternalDocumentConfirmationRecords">
    <el-row class="title">
      <el-col :span="20" style="padding-left: 20px;text-align: left;">外来文件确认记录</el-col>
    </el-row>
    <el-tabs type="border-card" v-model="activeName" style="height: 100%;">
      <el-tab-pane label="填写" name="填写" style="height: 100%;">
        <div style="display: flex;align-items: center;justify-content: flex-end;margin-right: 20px;">
          <el-button size="small" type="primary" @click="handleAdd0" style="margin-left: 20px;" v-if="addPower">新增</el-button>
          <el-upload :action="action" :multiple="false"
              :show-file-list="false"
          accept='.doc,.docx' :headers="headers" :on-change="beforeUpload"
          :on-error="onError" ref='upload' v-if="upPower" :on-success="handleSuccessUp" style="display:inline-block;margin-left: 20px;">
          <el-button size="small" type="primary" :loading="upLoading">导入</el-button></el-upload>
        </div>
        <div class="table" style="height: calc(100% - 200px)">
          <ValueTable ref="ValueTable0" :url="$api.manageRecordTotal.pageManageRecordVerify"
      :componentData="componentData0" :key="upIndex0" :delUrl="$api.manageRecordTotal.delManageRecordVerify" :upUrl="$api.manageRecordTotal.doManageRecordVerify" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="历史记录" name="历史记录" style="height: 100%;">
        <div class="search">
          <div class="search_thing">
            <div class="search_label">年：</div>
            <div class="search_input">
              <el-date-picker
                v-model="componentData.entity.year"
                type="year"
                placeholder="选择年" format="yyyy"
                value-format="yyyy" size="small" @change="refreshTable()">
              </el-date-picker>
            </div>
          </div>
          <div class="search_thing" style="padding-left: 30px;">
            <el-button size="small" @click="refresh()">重 ç½®</el-button>
            <el-button size="small" type="primary" @click="refreshTable()">查 è¯¢</el-button>
          </div>
        </div>
        <div class="table">
          <ValueTable ref="ValueTable" :url="$api.manageRecordTotal.pageManageRecordTotal"
            :componentData="componentData" :key="upIndex"/>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- è¯¦æƒ…/下载/审核 -->
    <el-dialog
      :title="title0"
      :visible.sync="lookDialogVisible"
      width="800px" :class="{downPdf:title0=='下载'}" :modal="title0!='下载'" top="5vh">
      <filePreview v-if="lookDialogVisible" :fileUrl="javaApi+'/word/'+currentInfo.url"
      :currentFile="{}" style="max-height: 70vh;overflow-y: auto;"/>
      <span slot="footer" class="dialog-footer" v-if="title0=='审核'||title0=='批准'">
        <el-button @click="submitCheck('不通过')" :loading="noCheckLoading">不通过</el-button>
        <el-button type="primary" @click="submitCheck('通过')" :loading="checkLoading">通 è¿‡</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import filePreview from '../tool/file-preview.vue'
import ValueTable from '../tool/value-table.vue'
export default {
  components: {
    ValueTable,
    filePreview,
  },
  data(){
    return{
      title0:'查看',
      activeName:'填写',
      lookDialogVisible:false,
      noCheckLoading:false,
      checkLoading:false,
      componentData: {
          entity: {
            year: null,
            orderBy: {
              field: 'id',
              order: 'desc'
            }
          },
          isIndex: true,
          showSelect: false,
          select: false,
          do: [{
            id: 'handleLook',
            font: '查看',
            type: 'text',
            method: 'handleLook',
            disabFun: (row, index) => {
                        return !row.url
            }
          }, {
            id: 'handleDown0',
            font: '下载',
            type: 'text',
            method: 'handleDown0',
            disabFun: (row, index) => {
                        return !row.url
            }
          },
          {
            id: 'handleSubmit',
            font: '提交',
            type: 'text',
            method: 'handleSubmit',
            disabFun: (row, index) => {
                        return !!row.submitUserName
            }
          },{
            id: 'handleApproval',
            font: '批准',
            type: 'text',
            method: 'handleApproval',
            disabFun: (row, index) => {
                        return !row.submitUserName||!!row.ratifyUserName
            }
          }],
          tagField: {},
          selectField: {},
          requiredAdd: [],
          requiredUp: [],
          needSort: [],
          inputType:''
      },
      // æ ·å“åˆ—表
      componentData0: {
          entity: {
            manageRecordTotalId: null,
            orderBy: {
              field: 'id',
              order: 'desc'
            }
          },
          isIndex: true,
          showSelect: false,
          select: false,
          do: [{
            id: 'update',
            font: '修改',
            type: 'text',
            method: 'doDiy'
          },{
            id: 'delete',
            font: '删除',
            type: 'text',
            method: 'doDiy'
          }],
          tagField: {},
          selectField: {},
          requiredAdd: ['documentName','documentCode'],
          requiredUp: ['documentName','documentCode'],
          datePicker:['effectiveDate','cancelDate'],
          needSort: [],
          inputType: ''
      },
      upIndex0: 100,
      entityCopy: {},
      upIndex: 0,
      addPower:true,
      upPower:true,
      currentInfo:{},
      upLoading:false,
    }
  },
  // ç”¨äºŽä¸Šä¼ æ–‡ä»¶çš„信息
  computed: {
    headers() {
      return {
        'token': sessionStorage.getItem('token')
      }
    },
    action() {
      return this.javaApi +this.$api.manageRecordTotal.exportManageRecordVerify
    }
  },
  mounted() {
    this.entityCopy = this.HaveJson(this.componentData.entity);
    this.getPower()
  },
  methods:{
    getPower(){
      let power = JSON.parse(sessionStorage.getItem('power'))
      let add = false
      let del = false
      let up = false;
      let sub = false
      let ratify = false
      for (var i = 0; i < power.length; i++) {
        if (power[i].menuMethod == 'addManageRecordVerify') {
          add = true
        }
        if (power[i].menuMethod == 'delManageRecordVerify') {
          del = true
        }
        if (power[i].menuMethod == 'exportManageRecordVerify') {
          up = true
        }
        if (power[i].menuMethod == 'submitManageRecordTotal') {
          sub = true
        }
        if (power[i].menuMethod == 'ratifyManageRecordTotal') {
          ratify = true
        }
      }
      if (!ratify) {
        this.componentData.do.splice(3, 1)
      }
      if (!sub) {
        this.componentData.do.splice(2, 1)
      }
      if (!del) {
        this.componentData0.do.splice(1, 1)
      }
      if (!add) {
        this.componentData0.do.splice(0, 1)
      }
      this.addPower = add
      this.upPower = up
    },
    handleAdd0(){
      this.$refs.ValueTable0.openAddDia(this.$api.manageRecordTotal.addManageRecordVerify);
    },
    refreshTable() {
      this.$refs['ValueTable'].selectList()
    },
    beforeUpload(file) {
      if (file.size > 1024 * 1024 * 10) {
        this.$message.error('上传文件不超过10M');
        this.$refs.upload.clearFiles()
        return false;
      } else {
        // this.upLoading = true;
        return true;
      }
    },
    onError(err, file, fileList) {
      this.$message.error('上传失败')
      this.$refs.upload.clearFiles()
    },
    handleSuccessUp(response) {
      this.upLoading = false;
      if (response.code == 200) {
        this.$message.success('上传成功');
        this.$refs['ValueTable0'].selectList()
      }else{
        this.$message.error('上传失败');
      }
    },
    refresh() {
      this.componentData.entity = this.HaveJson(this.entityCopy)
      this.upIndex++
      this.refreshTable()
    },
    submitCheck(type){},
    // æŸ¥çœ‹
    handleLook(row){
      this.title0 = '查看'
      this.commonFun(row)
    },
    // å…¬ç”¨æ–¹æ³•
    commonFun(row,callbanck){
      this.currentInfo = row
      this.componentData0.entity.manageRecordTotalId = row.id
      this.$axios.post(this.$api.manageRecordTotal.pageManageRecordVerify ,{
        entity:this.componentData0.entity,
        page:{
          current:-1,
          size:-1
        }
      },{headers: {
            'Content-Type': 'application/json'
        },noQs:true}).then(res=>{
        this.currentInfo.arr = res.data.body.records
        this.lookDialogVisible = true
        if(callbanck){
          callbanck()
        }
      }).catch(err=>{});
    },
    handleDown0(row){
      let url = this.javaApi+'word/'+row.url
      const link = document.createElement('a');
      link.href = url;
      link.download = row.month+' å¤–来文件确认记录';
      link.click();
    },
    // æäº¤
    handleSubmit(row){
      this.$confirm('是否提交 '+row.year+' å¹´çš„数据', '提交', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.post(this.$api.manageRecordTotal.submitManageRecordTotal,{
          id:row.id
        }).then(res=>{
          this.$message({
            type: 'success',
            message: '提交成功!'
          });
          this.$refs['ValueTable'].selectList()
        }).catch(err=>{});
      })
    },
    // æ‰¹å‡†
    handleApproval(row){
      this.title0 = '批准'
      this.commonFun(row)
    },
    // æäº¤å®¡æ ¸/批准
    submitCheck(state){
      if(state=='通过'){
        this.checkLoading = true
      }else{
        this.noCheckLoading = true
      }
      this.$axios.post(this.$api.manageRecordTotal.ratifyManageRecordTotal,{
        id:this.currentInfo.id,
        ratifyState:state
      }).then(res=>{
        this.checkLoading = false
        this.noCheckLoading = false
        if (res.code === 201) return
        this.$message({
          type: 'success',
          message: '操作成功!'
        });
        this.$refs['ValueTable'].selectList()
        this.lookDialogVisible = false
      }).catch(err=>{});
    },
  }
}
</script>

<style scoped>
.title {
    height: 60px;
    line-height: 60px;
  }
  .search {
    background-color: #fff;
    height: 40px;
    display: flex;
    align-items: center;
    position: relative;
  }

  .search_thing {
    width: 350px;
    display: flex;
    align-items: center;
  }

  .search_label {
    width: 110px;
    font-size: 14px;
    text-align: right;
  }

  .search_input {
    width: calc(100% - 110px);
  }

  .table {
    background-color: #fff;
    width: calc(100% - 40px);
    height: calc(100% - 60px - 140px);
    padding: 20px;
  }
  >>>.el-tabs__content{
    height: 100%;
  }
</style>

 src/components/view/a8-obsolete-document-destruction-records.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,440 @@
<template>
  <!-- ä½œåºŸæ–‡ä»¶é”€æ¯è®°å½• -->
  <div class="ObsoleteDocumentDestructionRecords">
    <el-row class="title">
      <el-col :span="12" style="padding-left: 20px;text-align: left;">作废文件销毁记录</el-col>
      <el-col :span="12" style="text-align: right;">
        <el-button size="medium" type="primary" @click="openAdd" v-if="addPower">新增</el-button>
        <el-upload :action="action" :multiple="false"
              :show-file-list="false"
          accept='.doc,.docx' :headers="headers" :on-change="beforeUpload"
          :on-error="onError" ref='upload' v-if="upPower" :on-success="handleSuccessUp" style="display:inline-block;margin-left: 20px;">
          <el-button type="primary" size="medium">导入</el-button></el-upload>
        <el-button size="medium" type="primary" @click="handleDown" :loading="outLoading" v-if="outPower" style="display:inline-block;margin-left: 20px;">导出</el-button>
      </el-col>
    </el-row>
    <div class="search">
      <div class="search_thing">
        <div class="search_label">文件名称：</div>
        <div class="search_input"><el-input size="small" placeholder="请输入" clearable v-model="componentData.entity.documentName"
            @keyup.enter.native="refreshTable()"></el-input></div>
      </div>
      <div class="search_thing">
        <div class="search_label">文件编号：</div>
        <div class="search_input">
          <el-input size="small" placeholder="请输入" clearable v-model="componentData.entity.documentCode"
            @keyup.enter.native="refreshTable()"></el-input>
        </div>
      </div>
      <div class="search_thing" style="padding-left: 30px;">
        <el-button size="small" @click="refresh()">重 ç½®</el-button>
        <el-button size="small" type="primary" @click="refreshTable()">查 è¯¢</el-button>
      </div>
    </div>
    <div class="table">
      <ValueTable ref="ValueTable" :url="$api.manageRecordCancel.pageManageRecordCancel"
        :delUrl="$api.manageRecordCancel.delManageRecordCancel"
        :componentData="componentData" :upUrl="$api.manageRecordIssueRecycle.doManageRecordIssueRecycle" :key="upIndex"/>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="addDialogVisible"
      width="400px" top="6vh">
      <el-row>
        <el-col :span="24" style="margin-bottom: 16px;">
          <div class="search_thing">
            <div class="search_label"><span style="color: red;margin-left: 4px;">* </span>文件编号：</div>
            <div class="search_input">
              <el-select v-model="addInfo.documentCode" size="small" style="width: 100%;" @change="getCurrentFile" allow-create clearable filterable>
                <el-option
                  v-for="item in fileList"
                  :key="item.documentCode"
                  :label="item.title"
                  :value="item.documentCode">
                </el-option>
              </el-select>
            </div>
          </div>
        </el-col>
        <el-col :span="24" style="margin-bottom: 16px;">
          <div class="search_thing">
            <div class="search_label">文件名称：</div>
            <div class="search_input"><el-input size="small" placeholder="请输入" clearable v-model="addInfo.documentName"></el-input></div>
          </div>
        </el-col>
        <el-col :span="24" style="margin-bottom: 16px;">
          <div class="search_thing">
            <div class="search_label">数量：</div>
            <div class="search_input"><el-input size="small" placeholder="请输入" clearable v-model="addInfo.qty"></el-input></div>
          </div>
        </el-col>
        <el-col :span="24" style="margin-bottom: 16px;">
          <div class="search_thing">
            <div class="search_label">销毁原因：</div>
            <div class="search_input"><el-input size="small" placeholder="请输入" clearable v-model="addInfo.reason"></el-input></div>
          </div>
        </el-col>
        <el-col :span="24" style="margin-bottom: 16px;">
          <div class="search_thing">
            <div class="search_label">备注：</div>
            <div class="search_input"><el-input size="small" placeholder="请输入" clearable v-model="addInfo.remark" type="textarea"
              :rows="2"></el-input></div>
          </div>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 æ¶ˆ</el-button>
        <el-button type="primary" @click="handleAdd" :loading="addLoading">ç¡® å®š</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ValueTable from '../tool/value-table.vue'
export default {
  components: {
    ValueTable
  },
  data(){
    return{
      addPower:true,
      outPower:true,
      upPower:true,
      outLoading:false,
      addLoading:false,
      componentData: {
        entity: {
          documentName: null,
          documentCode: null,
          orderBy: {
            field: 'createTime',
              order: 'desc'
          }
        },
        isIndex: true,
        showSelect: false,
        select: false,
        // selectMethod: 'handleChangeTask',
        do: [{
          id: 'delete',
          font: '删除',
          type: 'text',
          method: 'doDiy',
          disabFun: (row, index) => {
          return row.ratifyState=='通过'
          }
        }, {
          id: 'handleEdit0',
          font: '修改',
          type: 'text',
          method: 'handleEdit0',
          field:[],
          disabFun: (row, index) => {
          return row.ratifyState=='通过'
          }
        }, {
          id: 'handleRatify',
          font: '批准',
          type: 'text',
          method: 'handleRatify',
          field:[],
          disabFun: (row, index) => {
          return row.ratifyState=='通过'
          }
        }],
        tagField: {
          // documentType:{
          //   select: []
          // },
          // receiveUserName:{
          //   select: []
          // },
        },
        selectField: {
          // documentType:{
          //   select: []
          // },
          // receiveUserName:{
          //   select: []
          // },
        },
        addUpload:['signatoryUrl'],
        requiredAdd: [],
        requiredUp: [],
        datePicker:['receiveDate'],
        noHead:['signedUserName','signedDate','departLims'],//不参与新增编辑的字段
        needSort: [],
        inputType:''
      },
      entityCopy: {},
      upIndex: 0,
      addInfo:{},
      title:'新增',
      addInfo:{},
      addDialogVisible:false,
      fileList:[],
      personList:[],
    }
  },
  // ç”¨äºŽä¸Šä¼ æ–‡ä»¶çš„信息
  computed: {
    headers() {
      return {
        'token': sessionStorage.getItem('token')
      }
    },
    action() {
      return this.javaApi +this.$api.manageRecordCancel.exportInManageRecordCancel
    }
  },
  mounted() {
    this.entityCopy = this.HaveJson(this.componentData.entity);
    this.getPower()
    this.getAuthorizedPerson()
    this.getFileList()
  },
  methods:{
    getPower(){
      let power = JSON.parse(sessionStorage.getItem('power'))
      let add = false
      let del = false
      let up = false;
      let out = false;
      let ratify = false
      for (var i = 0; i < power.length; i++) {
        if (power[i].menuMethod == 'addManageRecordCancel') {
          add = true
        }
        if (power[i].menuMethod == 'delManageRecordCancel') {
          del = true
        }
        if (power[i].menuMethod == 'exportInManageRecordCancel') {
          up = true
        }
        if (power[i].menuMethod == 'ratifyManageRecordCancel') {
          ratify = true
        }
        if (power[i].menuMethod == 'exportOutManageRecordCancel') {
          out = true
        }
      }
      if (!ratify) {
        this.componentData.do.splice(2, 1)
      }
      if (!add) {
        this.componentData.do.splice(1, 1)
      }
      if (!del) {
        this.componentData.do.splice(0, 1)
      }
      this.addPower = add
      this.outPower = out
      this.upPower = up
    },
    openAdd(){
      // this.$refs.ValueTable.openAddDia(this.$api.manageRecordIssueRecycle.addManageRecordIssueRecycle);
      this.addInfo = {}
      this.title = '新增'
      this.addDialogVisible = true;
    },
    handleEdit0(row){
      this.addInfo = row
      this.title = '修改'
      this.addDialogVisible = true;
    },
    // å¯¼å‡º
    handleDown(){
      this.outLoading = true
      this.$axios.post(this.$api.manageRecordCancel.exportOutManageRecordCancel,{entity:this.componentData.entity},{headers: { 'Content-Type': 'application/json' }}).then(res => {
        this.outLoading = false
        if(res.code==201) return this.$message.error('导出失败')
        this.$message.success('导出成功')
        let url = this.javaApi+'word/'+res.message
        const link = document.createElement('a');
        link.href = url;
        link.download = '作废文件销毁记录';
        link.click();
      })
    },
    refreshTable() {
      this.$refs['ValueTable'].selectList()
    },
    refresh() {
      this.componentData.entity = this.HaveJson(this.entityCopy)
      this.upIndex++
      this.refreshTable()
    },
    beforeUpload(file) {
      if (file.size > 1024 * 1024 * 10) {
        this.$message.error('上传文件不超过10M');
        this.$refs.upload.clearFiles()
        return false;
      } else {
        // this.upLoading = true;
        return true;
      }
    },
    onError(err, file, fileList) {
      this.$message.error('上传失败')
      this.$refs.upload.clearFiles()
    },
    handleSuccessUp(response) {
      this.upLoading = false;
      if (response.code == 200) {
        this.$message.success('上传成功');
        this.$refs['ValueTable'].selectList()
      }else{
        this.$message.error('上传失败');
      }
    },
    // èŽ·å–文件列表--文件清单
    getFileList(){
      this.$axios.post(this.$api.manageDocumentList.pageManageDocumentList,{
        entity: {
          orderBy: {
            field: 'createTime',
            order: 'desc'
          }
        },
        page:{
          current:-1,
          size:-1
        }
      },{headers: {
        'Content-Type': 'application/json'
      }}).then(res=>{
        this.fileList = res.data.body.records.map(m=>{
          m.title = m.documentCode
          return m
        })
      }).catch(err=>{})
    },
    handleAdd(){
      if(!this.addInfo.documentCode) return this.$message.error('请输入文件编号')
      this.addLoading = true
      let obj = {}
      if(this.title=='新增'){
        obj = this.HaveJson(this.addInfo)
      }else{
        let {id,documentCode,documentName,qty,reason,remark} = this.addInfo
        obj = {id,documentCode,documentName,qty,reason,remark}
      }
      this.$axios.post(this.$api.manageRecordCancel[this.title=='新增'?'addManageRecordCancel':'doManageRecordCancel'], obj,{headers: { 'Content-Type': 'application/json' },noQs:true}).then(res => {
          this.addLoading = false
          if (res.code == 201) {
            return
          }
          this.addDialogVisible = false
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
          this.refreshTable()
        }).catch(err => {})
    },
    getCurrentFile(e){
      let obj = this.fileList.find(m=>m.documentCode==e)
      if(obj){
        this.$set(this.addInfo,'documentName',obj.name)
      }
    },
    getAuthorizedPerson() {
      this.$axios.get(this.$api.user.getUserMenu).then(res => {
        let data = []
        res.data.forEach(a => {
          data.push({
            label: a.name,
            value: a.id
          })
        })
        // this.componentData.tagField.receiveUserName.select = data
        // this.componentData.selectField.receiveUserName.select = data
        this.personList = data
      })
    },
    handleRatify(row){
      this.$confirm('是否批准通过?', '提示', {
        confirmButtonText: '通过',
        cancelButtonText: '不通过',
        type: 'warning',
        closeOnClickModal: false, // ç¦æ­¢ç‚¹å‡»é®ç½©å±‚关闭
        distinguishCancelAndClose: true,
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            // ç‚¹å‡»â€œç¡®å®šâ€æŒ‰é’®ï¼Œå…è®¸å…³é—­
            this.$axios.post(this.$api.manageRecordCancel.ratifyManageRecordCancel, {id:row.id,ratifyState:'通过'}).then(res => {
              if (res.code === 201) return
              this.refreshTable()
              done();
              this.$message({
                type: 'success',
                message: '提交成功'
              })
            })
            .catch(err => {

            })
          } else if (action === 'cancel') {
            // ç‚¹å‡»â€œå–消”按钮，不允许关闭
            this.$axios.post(this.$api.manageRecordCancel.ratifyManageRecordCancel, {id:row.id,ratifyState:'不通过'}).then(res => {
              if (res.code === 201) return
              this.refreshTable()
              done();
              this.$message({
                type: 'success',
                message: '提交成功'
              })
            })
            .catch(err => {

            })
            console.log("取消按钮点击事件，不关闭弹框");
          } else if (action === 'close') {
            // ç‚¹å‡»â€œÃ—”按钮，不允许关闭
            done();
            console.log("×按钮点击事件，不关闭弹框");
          }
          }
      })
    }
  }
}
</script>

<style scoped>
.title {
    height: 60px;
    line-height: 60px;
  }
  .search {
    background-color: #fff;
    height: 80px;
    display: flex;
    align-items: center;
  }

  .search_thing {
    width: 350px;
    display: flex;
    align-items: center;
  }

  .search_label {
    width: 110px;
    font-size: 14px;
    text-align: right;
  }

  .search_input {
    width: calc(100% - 110px);
  }

  .table {
    margin-top: 10px;
    background-color: #fff;
    width: calc(100% - 40px);
    height: calc(100% - 60px - 80px - 10px - 40px);
    padding: 20px;
  }
</style>

 src/components/view/a8-periodic-document-review-records.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,592 @@
<template>
  <!-- æ–‡ä»¶å®šæœŸå®¡æŸ¥è®°å½• -->
  <div class="PeriodicDocumentReviewRecords">
    <el-row class="title">
      <el-col :span="12" style="padding-left: 20px;text-align: left;">文件定期审查记录</el-col>
      <!-- <el-col :span="12" style="text-align: right;">
        <el-button size="medium" type="primary" @click="openAdd" v-if="addPower">新增</el-button>
        <el-upload :action="action" :show-file-list="false"
          accept='.doc,.docx' :headers="headers" :on-change="beforeUpload"
          :on-error="onError" ref='upload' v-if="upPower" :on-success="handleSuccessUp" style="display:inline-block;margin-left: 20px;">
          <el-button type="primary" size="medium">导入</el-button></el-upload>
        <el-button size="medium" type="primary" @click="handleDown" :loading="outLoading" v-if="outPower" style="display:inline-block;margin-left: 20px;">导出</el-button>
      </el-col> -->
    </el-row>
    <el-tabs type="border-card" v-model="activeName" style="height: 100%;">
      <el-tab-pane label="填写" name="填写" style="height: 100%;">
        <div class="search">
          <div class="search_thing">
            <div class="search_label">文件名称：</div>
            <div class="search_input"><el-input size="small" placeholder="请输入" clearable v-model="componentData.entity.documentName"
                @keyup.enter.native="refreshTable()"></el-input></div>
          </div>
          <div class="search_thing">
            <div class="search_label">文件编号：</div>
            <div class="search_input">
              <el-input size="small" placeholder="请输入" clearable v-model="componentData.entity.documentCode"
                @keyup.enter.native="refreshTable()"></el-input>
            </div>
          </div>
          <div class="search_thing" style="padding-left: 30px;">
            <el-button size="small" @click="refresh()">重 ç½®</el-button>
            <el-button size="small" type="primary" @click="refreshTable()">查 è¯¢</el-button>
          </div>
          <div class="btns">
            <el-button size="medium" type="primary" @click="openAdd" v-if="addPower">新增</el-button>
            <el-upload :action="action" :multiple="false"
              :show-file-list="false"
              accept='.doc,.docx' :headers="headers" :on-change="beforeUpload"
              :on-error="onError" ref='upload' v-if="upPower" :on-success="handleSuccessUp" style="display:inline-block;margin-left: 20px;">
              <el-button type="primary" size="medium">导入</el-button></el-upload>
          </div>
        </div>
        <div class="table">
          <ValueTable ref="ValueTable" :url="$api.manageRecordIntervals.pageManageRecordIntervals"
            :delUrl="$api.manageRecordIntervals.delManageRecordIntervals"
            :componentData="componentData" :upUrl="$api.manageRecordIssueRecycle.doManageRecordIssueRecycle" :key="upIndex"/>
        </div>
      </el-tab-pane>
      <el-tab-pane label="历史记录" name="历史记录" style="height: 100%;">
        <div class="search">
          <div class="search_thing">
            <div class="search_label">年：</div>
            <div class="search_input">
              <el-date-picker
                v-model="componentData0.entity.year"
                type="year"
                placeholder="选择年" format="yyyy"
                value-format="yyyy" size="small" @change="refreshTable()">
              </el-date-picker>
            </div>
          </div>
          <div class="search_thing" style="padding-left: 30px;">
            <el-button size="small" @click="refresh(1)">重 ç½®</el-button>
            <el-button size="small" type="primary" @click="refreshTable(1)">查 è¯¢</el-button>
          </div>
        </div>
        <div class="table">
          <ValueTable ref="ValueTable0" :url="$api.manageRecordIntervals.pageManageRecordIntervalsTotal"
            :componentData="componentData0" :key="upIndex"/>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      :title="title"
      :visible.sync="addDialogVisible"
      width="400px" top="6vh">
      <el-row>
        <el-col :span="24" style="margin-bottom: 16px;">
          <div class="search_thing">
            <div class="search_label"><span style="color: red;margin-left: 4px;">* </span>文件编号：</div>
            <div class="search_input">
              <el-select v-model="addInfo.documentCode" size="small" style="width: 100%;" @change="getCurrentFile" allow-create clearable filterable>
                <el-option
                  v-for="item in fileList"
                  :key="item.documentCode"
                  :label="item.title"
                  :value="item.documentCode">
                </el-option>
              </el-select>
            </div>
          </div>
        </el-col>
        <el-col :span="24" style="margin-bottom: 16px;">
          <div class="search_thing">
            <div class="search_label">文件名称：</div>
            <div class="search_input"><el-input size="small" placeholder="请输入" clearable v-model="addInfo.documentName"></el-input></div>
          </div>
        </el-col>
        <el-col :span="24" style="margin-bottom: 16px;">
          <div class="search_thing">
            <div class="search_label">版本号：</div>
            <div class="search_input"><el-input size="small" placeholder="请输入" clearable v-model="addInfo.documentVersion"></el-input></div>
          </div>
        </el-col>
        <el-col :span="24" style="margin-bottom: 16px;">
          <div class="search_thing">
            <div class="search_label">修订号：</div>
            <div class="search_input"><el-input size="small" placeholder="请输入" clearable v-model="addInfo.revision"></el-input></div>
          </div>
        </el-col>
        <el-col :span="24" style="margin-bottom: 16px;">
          <div class="search_thing">
            <div class="search_label">适宜性：</div>
            <div class="search_input">
              <el-select v-model="addInfo.suitability" placeholder="请选择" size="small" style="width: 100%;">
                <el-option
                  v-for="item in typeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
        </el-col>
        <el-col :span="24" style="margin-bottom: 16px;">
          <div class="search_thing">
            <div class="search_label">备注：</div>
            <div class="search_input"><el-input size="small" placeholder="请输入" clearable v-model="addInfo.remark" type="textarea"
              :rows="2"></el-input></div>
          </div>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 æ¶ˆ</el-button>
        <el-button type="primary" @click="handleAdd" :loading="addLoading">ç¡® å®š</el-button>
      </span>
    </el-dialog>
    <!-- è¯¦æƒ…/审核 -->
    <el-dialog
      :title="title0"
      :visible.sync="lookDialogVisible"
      width="800px" top="5vh">
      <filePreview v-if="lookDialogVisible" :fileUrl="javaApi+'/word/'+currentInfo.url"
      :currentFile="{}" style="max-height: 70vh;overflow-y: auto;"/>
      <span slot="footer" class="dialog-footer" v-if="title0=='审核'||title0=='批准'">
        <el-button @click="submitCheck('不通过')" :loading="noCheckLoading">不通过</el-button>
        <el-button type="primary" @click="submitCheck('通过')" :loading="checkLoading">通 è¿‡</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ValueTable from '../tool/value-table.vue'
import filePreview from '../tool/file-preview.vue'
export default {
  components: {
    ValueTable,
    filePreview
  },
  data() {
    return {
      activeName:'填写',
      title0:'新增',
      addPower:true,
      outPower:true,
      upPower:true,
      outLoading:false,
      addLoading:false,
      lookDialogVisible:false,
      noCheckLoading:false,
      checkLoading:false,
      componentData: {
        entity: {
          documentName: null,
          documentCode: null,
          orderBy: {
            field: 'id',
            order: 'desc'
          }
        },
        isIndex: true,
        showSelect: false,
        select: false,
        // selectMethod: 'handleChangeTask',
        do: [{
          id: 'delete',
          font: '删除',
          type: 'text',
          method: 'doDiy',
        }, {
          id: 'handleEdit',
          font: '修改',
          type: 'text',
          method: 'handleEdit',
          field:[],
        }],
        tagField: {
          // documentType:{
          //   select: []
          // },
          // receiveUserName:{
          //   select: []
          // },
        },
        selectField: {
          // documentType:{
          //   select: []
          // },
          // receiveUserName:{
          //   select: []
          // },
        },
        addUpload:['signatoryUrl'],
        requiredAdd: [],
        requiredUp: [],
        datePicker:['receiveDate'],
        noHead:['signedUserName','signedDate','departLims'],//不参与新增编辑的字段
        needSort: [],
        inputType:''
      },
      componentData0: {
          entity: {
            year: null,
            orderBy: {
              field: 'id',
              order: 'desc'
            }
          },
          isIndex: true,
          showSelect: false,
          select: false,
          do: [{
            id: 'handleLook',
            font: '查看',
            type: 'text',
            method: 'handleLook',
            disabFun: (row, index) => {
                        return !row.url
            }
          }, {
            id: 'handleDown0',
            font: '下载',
            type: 'text',
            method: 'handleDown0',
            disabFun: (row, index) => {
                        return !row.url
            }
          },
          {
            id: 'handleSubmit',
            font: '提交',
            type: 'text',
            method: 'handleSubmit',
            disabFun: (row, index) => {
                        return !!row.submitUserName
            }
          },{
            id: 'handleApproval',
            font: '批准',
            type: 'text',
            method: 'handleApproval',
            disabFun: (row, index) => {
                        return !row.submitUserName||!!row.ratifyUserName
            }
          }],
          tagField: {},
          selectField: {},
          requiredAdd: [],
          requiredUp: [],
          needSort: [],
          inputType:''
      },
      entityCopy: {},
      entityCopy0: {},
      upIndex: 0,
      addInfo:{},
      title:'新增',
      addInfo:{},
      addDialogVisible:false,
      fileList:[],
      typeList:[],
      currentInfo:{},
    }
  },
  // ç”¨äºŽä¸Šä¼ æ–‡ä»¶çš„信息
  computed: {
    headers() {
      return {
        'token': sessionStorage.getItem('token')
      }
    },
    action() {
      return this.javaApi +this.$api.manageRecordIntervals.exportInManageRecordIntervals
    }
  },
  mounted() {
    this.entityCopy = this.HaveJson(this.componentData.entity);
    this.entityCopy0 = this.HaveJson(this.componentData0.entity);
    this.getPower()
    this.getFileList()
    this.selectEnumByCategory()
  },
  methods:{
    getPower(){
      let power = JSON.parse(sessionStorage.getItem('power'))
      let add = false
      let del = false
      let up = false;
      let out = false;
      let submit = false
      let ratify = false
      for (var i = 0; i < power.length; i++) {
        if (power[i].menuMethod == 'addManageRecordIntervals') {
          add = true
        }
        if (power[i].menuMethod == 'delManageRecordIntervals') {
          del = true
        }
        if (power[i].menuMethod == 'exportInManageRecordIntervals') {
          up = true
        }
        if (power[i].menuMethod == 'exportOutManageRecordIntervals') {
          out = true
        }
        if (power[i].menuMethod == 'submitManageRecordIntervalsTotal') {
          submit = true
        }
        if (power[i].menuMethod == 'ratifyManageRecordIntervalsTotal') {
          ratify = true
        }
      }
      if (!ratify) {
        this.componentData0.do.splice(3, 1)
      }
      if (!submit) {
        this.componentData0.do.splice(2, 1)
      }
      if (!add) {
        this.componentData.do.splice(1, 1)
      }
      if (!del) {
        this.componentData.do.splice(0, 1)
      }
      this.addPower = add
      this.outPower = out
      this.upPower = up
    },
    // æ–°å¢ž
    openAdd(){
      // this.$refs.ValueTable.openAddDia(this.$api.manageRecordIssueRecycle.addManageRecordIssueRecycle);
      this.addInfo = {}
      this.title = '新增'
      this.addDialogVisible = true;
    },
    // å¯¼å‡º
    handleDown(){
      this.outLoading = true
      this.$axios.post(this.$api.manageRecordIntervals.exportOutManageRecordIntervals,{entity:this.componentData.entity},{headers: { 'Content-Type': 'application/json' }}).then(res => {
        this.outLoading = false
        if(res.code==201) return this.$message.error('导出失败')
        this.$message.success('导出成功')
        let url = this.javaApi+'word/'+res.message
        const link = document.createElement('a');
        link.href = url;
        link.download = '文件定期审查记录';
        link.click();
      })
    },
    refreshTable(num) {
      if(num){
        this.$refs['ValueTable0'].selectList()
      }else{
        this.$refs['ValueTable'].selectList()
      }
    },
    refresh(num) {
      if(num){
        this.componentData0.entity = this.HaveJson(this.entityCopy0)
        this.upIndex++
      }else{
        this.componentData.entity = this.HaveJson(this.entityCopy)
        this.upIndex++
      }
    },
    beforeUpload(file) {
      if (file.size > 1024 * 1024 * 10) {
        this.$message.error('上传文件不超过10M');
        this.$refs.upload.clearFiles()
        return false;
      } else {
        // this.upLoading = true;
        return true;
      }
    },
    onError(err, file, fileList) {
      this.$message.error('上传失败')
      this.$refs.upload.clearFiles()
    },
    handleSuccessUp(response) {
      this.upLoading = false;
      if (response.code == 200) {
        this.$message.success('上传成功');
        this.$refs['ValueTable'].selectList()
      }else{
        this.$message.error('上传失败');
      }
    },
    getCurrentFile(e){
      let obj = this.fileList.find(m=>m.documentCode==e)
      if(obj){
        this.$set(this.addInfo,'documentName',obj.name)
        this.$set(this.addInfo,'documentVersion',obj.version)
        // this.addInfo.documentName = obj.name
        // this.addInfo.documentVersion = obj.version
      }
    },
    // èŽ·å–文件列表--文件清单
    getFileList(){
      this.$axios.post(this.$api.manageDocumentList.pageManageDocumentList,{
        entity: {
          orderBy: {
            field: 'id',
            order: 'asc'
          }
        },
        page:{
          current:-1,
          size:-1
        }
      },{headers: {
        'Content-Type': 'application/json'
      }}).then(res=>{
        this.fileList = res.data.body.records.map(m=>{
          m.title = m.documentCode
          return m
        })
      }).catch(err=>{})
    },
    selectEnumByCategory() {
      this.$axios.post(this.$api.enums.selectEnumByCategory, {
        category: "适宜性"
      }).then(res => {
        this.typeList = res.data
      })
    },
    // æäº¤
    handleAdd(){
      if(!this.addInfo.documentCode) return this.$message.error('请输入文件编号')
      this.addLoading = true
      let obj = {}
      if(this.title=='新增'){
        obj = this.HaveJson(this.addInfo)
      }else{
        let {id,documentCode,documentName,documentVersion,revision,suitability,remark} = this.addInfo
        obj = {id,documentCode,documentName,documentVersion,revision,suitability,remark}
      }
      this.$axios.post(this.$api.manageRecordIntervals[this.title=='新增'?'addManageRecordIntervals':'doManageRecordIntervals'], obj,{headers: { 'Content-Type': 'application/json' },noQs:true}).then(res => {
          this.addLoading = false
          if (res.code == 201) {
            return
          }
          this.addDialogVisible = false
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
          this.refreshTable()
        }).catch(err => {})
    },
    // ä¿®æ”¹
    handleEdit(row){
      this.addInfo = row
      this.title = '编辑'
      this.addDialogVisible = true;
    },
    submitCheck(state){
      if(state=='通过'){
        this.checkLoading = true
      }else{
        this.noCheckLoading = true
      }
      this.$axios.post(this.$api.manageRecordIntervals.ratifyManageRecordIntervalsTotal,{
        id:this.currentInfo.id,
        ratifyState:state
      }).then(res=>{
        this.checkLoading = false
        if(res.code==201){
          return
        }
        this.noCheckLoading = false
        this.$message({
          type: 'success',
          message: '操作成功!'
        });
        this.$refs['ValueTable0'].selectList()
        this.lookDialogVisible = false
      }).catch(err=>{});
    },
    // æŸ¥çœ‹
    handleLook(row){
      this.title0 = '查看'
      this.commonFun(row)
    },
    commonFun(row,callbanck){
      this.currentInfo = row
      this.lookDialogVisible = true
      if(callbanck){
        callbanck()
      }
    },
    handleDown0(row){
      let url = this.javaApi+'word/'+row.url
      const link = document.createElement('a');
      link.href = url;
      link.download = row.month+' æ‰€æœ‰æ–‡ä»¶å®šæœŸæ£€æŸ¥è®°å½•';
      link.click();
    },
    // æäº¤
    handleSubmit(row){
      this.$confirm('是否提交 '+row.year+' å¹´çš„数据', '提交', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.post(this.$api.manageRecordIntervals.submitManageRecordIntervalsTotal,{
          id:row.id
        }).then(res=>{
          if (res.code === 201) return
          this.$message({
            type: 'success',
            message: '提交成功!'
          });
          this.$refs['ValueTable0'].selectList()
        }).catch(err=>{});
      })
    },
    // æ‰¹å‡†
    handleApproval(row){
      this.title0 = '批准'
      this.commonFun(row)
    },
  }
}
</script>

<style scoped>
.title {
    height: 60px;
    line-height: 60px;
  }
  .search {
    background-color: #fff;
    height: 40px;
    display: flex;
    align-items: center;
    position: relative;
  }

  .search_thing {
    width: 350px;
    display: flex;
    align-items: center;
  }

  .search_label {
    width: 110px;
    font-size: 14px;
    text-align: right;
  }

  .search_input {
    width: calc(100% - 110px);
  }

  .table {
    margin-top: 10px;
    background-color: #fff;
    width: calc(100% - 40px);
    height: calc(100% - 60px - 140px);
    padding: 20px;
  }
  >>>.el-tabs__content{
    height: 100%;
  }
  .btns{
    position: absolute;
    right: 20px;
    top: 5px;
  }
</style>

 src/util/downHtmlToPDF.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,22 @@
import html2canvas from "html2canvas";
import jsPDF from "jspdf";

export async function exportHtmlToPDF(element,name='exported') {
  try {
    // å°† HTML å…ƒç´ è½¬æ¢ä¸º canvas
    console.log("正在将 HTML è½¬æ¢ä¸º canvas...",element);
    const canvas = await html2canvas(element,{useCORS: true});
    const imgData = canvas.toDataURL("image/png");

    // åˆ›å»º PDF
    const pdf = new jsPDF("p", "mm", "a4");
    const pdfWidth = pdf.internal.pageSize.getWidth();
    const pdfHeight = (canvas.height * pdfWidth) / canvas.width;

    pdf.addImage(imgData, "PNG", 10, 10, pdfWidth-20, pdfHeight-20);
    pdf.save(name+".pdf");
    console.log("PDF å¯¼å‡ºæˆåŠŸï¼");
  } catch (error) {
    console.error("导出 PDF å¤±è´¥ï¼š", error);
  }
}