zss
2025-03-04 b64d6db597d332c699f84e4928f6d3e5551851f1
src/views/CNAS/process/method/methodVerification/index.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,198 @@
<template>
  <div class="capacity-scope">
    <div class="search">
      <div>
        <el-form :model="searchForm" ref="searchForm" size="small" :inline="true">
          <el-form-item label="标准方法" prop="methodName">
            <el-input size="small" placeholder="请输入" clearable v-model="searchForm.methodName"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="searchList">查 è¯¢</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetSearchForm">重 ç½®</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-button size="medium" type="primary" @click="openFormDia('add')">新 å¢ž</el-button>
      </div>
    </div>
    <div class="table">
      <div>
        <TableCard :showForm="false" :showTitle="false">
          <template v-slot:table>
            <limsTable :column="tableColumn" :height="'calc(100vh - 23em)'" :table-data="tableData"
              :table-loading="tableLoading" style="padding: 0 15px;margin-bottom: 16px" :page="page"
              @pagination="pagination">
            </limsTable>
          </template>
        </TableCard>
      </div>
    </div>
    <formDIa v-if="formDIa" ref="formDIa" :operationType="operationType" @closeDia="closeDia"></formDIa>
  </div>
</template>
<script>
import limsTable from '@/components/Table/lims-table.vue'
import TableCard from '@/views/CNAS/externalService/serviceAndSupplyPro/component/index.vue';
import formDIa from './component/formDIa.vue';
import { delMethodVerify, exportMethodVerify, pagesMethodVerify } from '@/api/cnas/process/method/methodVerification'
export default {
  name: 'a7-method-verification',
  // import å¼•入的组件需要注入到对象中才能使用
  components: { TableCard, limsTable, formDIa },
  data() {
    // è¿™é‡Œå­˜æ”¾æ•°æ®
    return {
      searchForm: {
        methodName: '',
        operationType: 1,
      },
      options: [
        { label: '上半年', value: '1' },
        { label: '下半年', value: '2' },
      ],
      tableColumn: [
        {
          label: '标准方法',
          prop: 'methodName',
          minWidth: '100'
        },
        {
          label: '验证原因',
          prop: 'verifyReason',
          minWidth: '100'
        },
        {
          label: '主要技术变化',
          prop: 'technologyChange',
          minWidth: '100'
        },
        {
          dataType: 'action',
          minWidth: '60',
          label: '操作',
          operation: [
            {
              name: '编辑',
              type: 'text',
              clickFun: (row) => {
                this.openFormDia('edit', row);
              },
            },
            {
              name: '导出',
              type: 'text',
              clickFun: (row) => {
                this.downLoadPost(row);
              },
            },
            {
              name: '删除',
              type: 'text',
              color: '#f56c6c',
              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 = {
        methodName: this.searchForm.methodName,
        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.methodName = '';
      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 => {
        this.outLoading = false
        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>