feat(import): 统一导入弹框与模板，修复模板日期格式及上传报错

gaoluyang

9 小时以前 29be8639dc16b5d82bddc6099b1fa5cdca75f77a

 src/views/CNAS/process/method/standardMethodsChange/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,200 @@
<template>
  <div class="capacity-scope">
    <div style="display: flex;justify-content: space-between">
      <div style="display: flex;">
        <div style="margin-bottom: 18px;margin-right: 10px;display: flex;align-items: center;line-height: 32px;">
          <span style="width: 88px;font-size: 14px;font-weight: 700;color: var(--lims-text-2);">标准方法</span>
          <el-input size="small" placeholder="请输入" clearable v-model="searchForm.standardName"
                    @keyup.enter="searchList"></el-input>
        </div>
        <div style="line-height: 30px;">
          <el-button type="primary" size="small" @click="searchList">查询</el-button>
          <el-button size="small" @click="resetSearchForm">重置</el-button>
        </div>
      </div>
      <div style="line-height: 30px;">
        <el-button size="small" type="primary" @click="openFormDia('add')">新 å¢ž</el-button>
      </div>
    </div>
    <div class="table">
      <limsTable :column="tableColumn" :height="'calc(100vh - 23em)'" :table-data="tableData"
                 :table-loading="tableLoading" :page="page"
                 @pagination="pagination">
      </limsTable>
    </div>
    <component :is="'formDIa'" v-if="formDIa" ref="formDIa" :operationType="operationType" :verify-type="0"
               @closeDia="closeDia" />
  </div>
</template>

<script>
import limsTable from '@/components/Table/lims-table.vue'
import formDIa from '../methodVerification/component/formDIa.vue'
import { delMethodVerify, exportMethodVerify, pagesMethodVerify } from '@/api/cnas/process/method/methodVerification'

export default {
  name: 'StandardMethodsChange',
  components: { limsTable, formDIa },
  data() {
    return {
      searchForm: {
        standardName: '',
        operationType: 0,
      },
      tableColumn: [
        {
          label: '标准方法',
          prop: 'methodName',
          minWidth: '120'
        },
        {
          label: '变更原因',
          prop: 'verifyReason',
          minWidth: '120'
        },
        {
          label: '主要技术变化',
          prop: 'technologyChange',
          minWidth: '120'
        },
        {
          label: '确认时间',
          prop: 'confirmDate',
          minWidth: '100'
        },
        {
          label: '创建时间',
          prop: 'createTime',
          minWidth: '100'
        },
        {
          dataType: 'action',
          minWidth: '60',
          label: '操作',
          operation: [
            {
              name: '详情',
              type: 'text',
              clickFun: (row) => {
                this.openFormDia('view', row);
              },
            },
            {
              name: '编辑',
              type: 'text',
              clickFun: (row) => {
                this.openFormDia('edit', row);
              },
            },
            {
              name: '导出',
              type: 'text',
              clickFun: (row) => {
                this.downLoadPost(row);
              },
            },
            {
              name: '删除',
              type: 'text',
              color: 'var(--el-color-danger)',
              clickFun: (row) => {
                this.deleteRow(row);
              },
            }
          ]
        }
      ],
      tableData: [],
      tableLoading: false,
      page: {
        size: 20,
        current: 1,
        total: 0
      },
      formDIa: false,
      operationType: '',
    };
  },
  mounted() {
    this.searchList()
  },
  methods: {
    // æŸ¥è¯¢åˆ—表
    searchList() {
      const entity = {
        standardName: this.searchForm.standardName,
        operationType: this.searchForm.operationType,
      }
      const page = this.page
      this.tableLoading = true
      pagesMethodVerify({ ...page, ...entity }).then(res => {
        this.tableLoading = false
        if (res.code === 200) {
          this.tableData = res.data.records
          this.page.total = res.data.total
        }
      }).catch(err => {
        console.log('err---', err);
        this.tableLoading = false
      })
    },
    // åˆ é™¤
    deleteRow(row) {
      this.$confirm('此操作将永久删除该数据, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableLoading = true
        delMethodVerify({ methodVerifyId: row.methodVerifyId }).then(res => {
          this.tableLoading = false
          if (res.code === 200) {
            this.$message.success('删除成功')
            this.searchList()
          }
        }).catch(err => {
          this.tableLoading = false
          console.log('err---', err);
        })
      })
    },
    // é‡ç½®æŸ¥è¯¢æ¡ä»¶
    resetSearchForm() {
      this.searchForm.standardName = '';
      this.searchList()
    },
    openFormDia(type, row) {
      this.formDIa = true
      this.operationType = type
      this.$nextTick(() => {
        this.$refs.formDIa.openDia(row)
      })
    },
    // å¯¼å‡º
    downLoadPost(row) {
      exportMethodVerify({ methodVerifyId: row.methodVerifyId }).then(res => {
        const blob = new Blob([res], { type: 'application/msword' });
        this.$download.saveAs(blob, '标准方法变更记录.docx')
      })
    },
    // å…³é—­å¼¹æ¡†
    closeDia() {
      this.formDIa = false
      this.searchList()
    },
    // åˆ†é¡µåˆ‡æ¢
    pagination(page) {
      this.page.size = page.limit
      this.searchList();
    },
  }
};
</script>

<style scoped>
.search {
  height: 46px;
  display: flex;
  justify-content: space-between;
}
</style>