lims-ruoyi-before.git

spring

2025-02-26 0a792f298774a8cfecaef5c888f04dd643d019bd

修改luckysheet样式

已修改5个文件

已添加5个文件

	public/index.html	11 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	public/luckysheet/css/luckysheet.css	7144 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	public/luckysheet/plugins/plugins.css	4344 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/api/cnas/process/nonconformingWork.js	85 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/components/Excel/luckysheet.vue	6 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/views/CNAS/process/nonconformingWork/nonconformingDistribution/components/formDia.vue	232 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/views/CNAS/process/nonconformingWork/nonconformingDistribution/index.vue	238 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/views/CNAS/process/nonconformingWork/nonconformingItem/components/qualityInfo.vue	322 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/views/CNAS/process/nonconformingWork/nonconformingItem/index.vue	197 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/views/standard/model/index.vue	6 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

 public/index.html

@@ -213,6 +213,12 @@
        color: #fff;
        opacity: 0.5;
      }
      /* .v-modal {
        z-index: 1 !important;
      } */
      .luckysheet-cols-menu {
        z-index: 9999 !important;
      }
    </style>
  </head>
  <body>
@@ -225,7 +231,10 @@
      </div>
    </div>
  </body>
  <script type='text/javascript' src='http://192.168.21.53:9001/web-apps/apps/api/documents/api.js'></script>
  <script
    type="text/javascript"
    src="http://192.168.21.53:9001/web-apps/apps/api/documents/api.js"
  ></script>
  <script src="<%= BASE_URL %>luckysheet/plugins/js/plugin.js"></script>
  <script src="<%= BASE_URL %>luckysheet/luckysheet.umd.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>

 public/luckysheet/css/luckysheet.css

ÎÄ¼þÌ«´ó

 public/luckysheet/plugins/plugins.css

ÎÄ¼þÌ«´ó

 src/api/cnas/process/nonconformingWork.js

¶Ô±ÈÐÂÎÄ¼þ
@@ -0,0 +1,85 @@
// ä¸ç¬¦åå·¥ä½ç¸å³æ¥å£
import request from "@/utils/request";

//æ¥è¯¢çç£è®°å½ä¸ç¬¦åæ§å¶ä¿¡æ¯åè¡¨
export function pageSuperviseDetailAccording(query) {
  return request({
    url: "/qualitySupervise/pageSuperviseDetailAccording",
    method: "get",
    params: query,
  });
}

//å¯¼åºä¸ç¬¦åé¡¹
export function superviseDetailAccordingExport(query) {
  return request({
    url: "/qualitySupervise/superviseDetailAccordingExport",
    method: "get",
    responseType: "blob",
    params: query,
  });
}

//æ¥è¯¢çç£è®°å½ä¸ç¬¦åæ§å¶ä¿¡æ¯
export function getSuperviseDetailAccording(query) {
  return request({
    url: "/qualitySupervise/getSuperviseDetailAccording",
    method: "get",
    params: query,
  });
}

//ä¸ç¬¦åé¡¹çåå¸åé¡µæ¥è¯¢
export function pageInconsistentDistribution(query) {
  return request({
    url: "/inconsistentDistribution/pageInconsistentDistribution",
    method: "get",
    params: query,
  });
}

//ä¸ç¬¦åé¡¹çåå¸å é¤
export function delInconsistentDistribution(query) {
  return request({
    url: "/inconsistentDistribution/delInconsistentDistribution",
    method: "delete",
    params: query,
  });
}

//å¯¼åºä¸ç¬¦åé¡¹çåå¸
export function exportInconsistentDistribution(query) {
  return request({
    url: "/inconsistentDistribution/exportInconsistentDistribution",
    method: "get",
    responseType: "blob",
    params: query,
  });
}

//ä¸ç¬¦åé¡¹çåå¸è¯¦æ
export function getInconsistentDistributionOne(query) {
  return request({
    url: "/inconsistentDistribution/getInconsistentDistributionOne",
    method: "get",
    params: query,
  });
}

// ä¸ç¬¦åé¡¹çåå¸æ°å¢
export function addInconsistentDistribution(data) {
  return request({
    url: "/inconsistentDistribution/addInconsistentDistribution",
    method: "post",
    data: data,
  });
}

// ä¸ç¬¦åé¡¹çåå¸ä¿®æ¹
export function updateInconsistentDistribution(data) {
  return request({
    url: "/inconsistentDistribution/updateInconsistentDistribution",
    method: "post",
    data: data,
  });
}

 src/components/Excel/luckysheet.vue

@@ -7,6 +7,7 @@
  height: 100%;
  left: 0px;
  top: 0px;
  z-index: 99999 !important;
}
</style>
<style>
@@ -19,6 +20,7 @@
  border-color: transparent;
  cursor: pointer;
}

#luckysheet .returnView {
  width: 50px;
  height: 26px;
@@ -43,6 +45,10 @@
#luckysheet .save:active {
  opacity: 0.7;
}

/* #luckysheet-postil-overshow {
  z-index: 9999 !important;
} */
</style>
<template>
  <div id="luckysheet"></div>

 src/views/CNAS/process/nonconformingWork/nonconformingDistribution/components/formDia.vue

¶Ô±ÈÐÂÎÄ¼þ
@@ -0,0 +1,232 @@
<template>
  <div>
    <el-dialog v-loading="diaLoading" :close-on-click-modal="false" :close-on-press-escape="false"
      :visible.sync="formDia" title="ä¸ç¬¦åé¡¹çåå¸" width="90%" @close="closeDia">
      <table border="1" cellspacing="10" class="table">
        <tr>
          <td>ç« èå·</td>
          <th class="div-with-line">
            <span style="float: left;">è¦ç´ </span>
            <span style="float: right;">é¨é¨</span>
          </th>
          <th>ä¸»ä»»</th>
          <th>ææ¯è´è´£äºº</th>
          <th>è´¨éè´è´£äºº</th>
          <th>ç»¼åå®¤</th>
          <th>è¯éªå®¤</th>
          <th>åè®¡</th>
          <th>å %</th>
        </tr>
        <tr v-for="(item, index) in distributionDetailList" :key="item.value">
          <td>{{ item.chapterNumber }}</td>
          <th>{{ item.essentials }}</th>
          <th>
            <el-input-number v-model="item.director" :precision="0" clearable size="small"></el-input-number>
          </th>
          <th>
            <el-input-number v-model="item.technology" :precision="0" clearable size="small"></el-input-number>
          </th>
          <th>
            <el-input-number v-model="item.quality" :precision="0" clearable size="small"></el-input-number>
          </th>
          <th>
            <el-input-number v-model="item.comprehensive" :precision="0" clearable size="small"></el-input-number>
          </th>
          <th>
            <el-input-number v-model="item.testing" :precision="0" clearable size="small"></el-input-number>
          </th>
          <th>
            {{ item.total }}
          </th>
          <th>
            {{ (item.proportion ? item.proportion : 0) + '%' }}
          </th>
        </tr>
        <tr>
          <td> </td>
          <th>
            å æ¯
          </th>
          <th>
            {{ (distributionProportion.director ? distributionProportion.director : 0) + '%' }}
          </th>
          <th>
            {{ (distributionProportion.technology ? distributionProportion.technology : 0) + '%' }}
          </th>
          <th>
            {{ (distributionProportion.quality ? distributionProportion.quality : 0) + '%' }}
          </th>
          <th>
            {{ (distributionProportion.comprehensive ? distributionProportion.comprehensive : 0) + '%' }}
          </th>
          <th>
            {{ (distributionProportion.testing ? distributionProportion.testing : 0) + '%' }}
          </th>
          <th>
            {{ distributionProportion.total ? distributionProportion.total : 0 }}
          </th>
          <th> </th>
        </tr>
      </table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDia">å æ¶</el-button>
        <el-button :loading="loading" type="primary" @click="handleEdit">æ äº¤</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getInconsistentDistributionOne,
  addInconsistentDistribution,
  updateInconsistentDistribution
} from '@/api/cnas/process/nonconformingWork.js'
export default {
  name: 'formDia',
  // import å¼å¥çç»ä»¶éè¦æ³¨å¥å°å¯¹è±¡ä¸æè½ä½¿ç¨
  components: {},
  data() {
    // è¿éåæ¾æ°æ®
    return {
      formDia: false,
      diaLoading: false,
      loading: false,
      distributionDetailList: [],
      form: {

      },
      distributionProportion: {}
    };
  },
  mounted() {

  },
  // æ¹æ³éå
  methods: {
    // æå¼å¼¹æ¡
    openDia(type, row) {
      this.formDia = true
      this.operationType = type
      if (type !== 'add') {
        this.searchInfo(row)
      } else {
        this.selectEnumByCategory()
      }
    },
    // æ¥è¯¢è¯¦æ
    searchInfo(row) {
      this.diaLoading = true
      getInconsistentDistributionOne({ distributionId: row.distributionId }).then(res => {
        this.diaLoading = false
        if (res.code === 201) return
        this.form = res.data
        this.distributionDetailList = this.form.distributionDetailList
        this.distributionProportion = this.form.distributionProportion
      }).catch(err => {
        console.log(err)
        this.diaLoading = false
      })
    },
    // æäº¤å¼¹æ¡æ°æ®
    handleEdit() {
      const date = new Date();
      const year = date.getFullYear();
      this.loading = true
      const internalPlan = this.HaveJson(this.form)
      internalPlan.distributionYear = year
      internalPlan.distributionDetailList = this.HaveJson(this.distributionDetailList)
      if (this.operationType === 'add') {
        addInconsistentDistribution(internalPlan).then(res => {
          this.loading = false
          if (res.code === 201) return
          this.$message.success('æä½æå')
          this.closeDia()
        }).catch(err => {
          console.log('err---', err);
          this.loading = false
        })
      } else if (this.operationType === 'edit') {
        updateInconsistentDistribution(internalPlan).then(res => {
          this.loading = false
          if (res.code === 201) return
          this.$message.success('æä½æå')
          this.closeDia()
        }).catch(err => {
          console.log('err---', err);
          this.loading = false
        })
      }
    },
    closeDia() {
      this.formDia = false
      this.$emit('closeDia')
    },
    selectEnumByCategory() {
      this.distributionDetailList = []
      // è¦ç´ 
      this.getDicts("essential").then((response) => {
        let arr = this.dictToValue(response.data)
        arr.map((item) => {
          const obj = Object.assign({
            essentials: item.label,
            chapterNumber: item.value,
          })
          this.distributionDetailList.push(obj)
        })
      });
    },
  }
};
</script>

<style scoped>
>>>.el-dialog {
  margin: 6vh auto 50px !important;
}

>>>.el-dialog__body {
  max-height: 68vh;
  overflow-y: auto;
}

>>>.is-required {
  margin-bottom: 6px;
}

.table {
  width: 100%;
  margin-top: 20px;
}

.table td {
  width: 30px;
  text-align: center;
}

.table th {
  width: 70px;
  height: 70px;
  text-align: center;
}

.div-with-line {
  width: 70px;
  height: 70px;
  position: relative;
  /*overflow: hidden; /* éèæº¢åºåå®¹ */
}

.div-with-line::after {
  content: '';
  position: absolute;
  bottom: 0;
  height: 1px;
  background-color: #000000;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  transform-origin: center 50%;
  top: 50%;
  width: 100px;
}
</style>

 src/views/CNAS/process/nonconformingWork/nonconformingDistribution/index.vue

¶Ô±ÈÐÂÎÄ¼þ
@@ -0,0 +1,238 @@
<template>
  <div>
    <div>
      <!-- <div class="view-title">
        <span>ä¸ç¬¦åé¡¹çåå¸</span>
        <span>
          <el-button size="medium" type="primary" @click="openFormDia('add')">æ° å¢</el-button>
        </span>
      </div> -->
      <div class="search-background">
        <span class="search-group">
          <span style="width: 120px">å¹´ä»½ï¼</span>
          <el-input v-model="searchForm.distributionYear" clearable size="small"></el-input>
        </span>
        <span class="search-group">
          <el-button size="medium" @click="resetSearchForm">é ç½®</el-button>
          <el-button size="medium" type="primary" @click="searchList">æ¥ è¯¢</el-button>
        </span>
        <div class="btn">
          <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 - 19em)'" :table-data="tableData"
                :table-loading="tableLoading" style="padding: 0 15px;margin-bottom: 16px" :page="page"
                @pagination="pagination">
              </limsTable>
            </template>
          </TableCard>
        </div>
      </div>
    </div>
    <form-dia v-if="formDia" ref="formDia" @closeDia="closeDia"></form-dia>
  </div>
</template>

<script>
import limsTable from "@/components/Table/lims-table.vue";
import TableCard from '@/components/TableCard/index.vue';
import FormDia from './components/formDia.vue';
import {
  pageInconsistentDistribution,
  delInconsistentDistribution,
  exportInconsistentDistribution,
} from '@/api/cnas/process/nonconformingWork.js'

export default {
  name: 'a7-distribution-of-nonconforming',
  // import å¼å¥çç»ä»¶éè¦æ³¨å¥å°å¯¹è±¡ä¸æè½ä½¿ç¨
  components: { FormDia, TableCard, limsTable },
  data() {
    // è¿éåæ¾æ°æ®
    return {
      searchForm: {
        distributionYear: '',
      },
      tableColumn: [
        {
          label: 'å¹´ä»½',
          prop: 'distributionYear',
          minWidth: '100'
        },
        {
          label: 'åå»ºäºº',
          prop: 'createUserName',
          minWidth: '100'
        },
        {
          label: 'åå»ºæ¶é´',
          prop: 'createTime',
          minWidth: '100'
        },
        {
          label: 'ä¿®æ¹äºº',
          prop: 'updateUserName',
          minWidth: '100'
        },
        {
          label: 'ä¿®æ¹æ¶é´',
          prop: 'updateTime',
          minWidth: '100'
        },
        {
          dataType: 'action',
          minWidth: '220',
          label: 'æä½',
          operation: [
            {
              name: 'ç¼è¾',
              type: 'text',
              clickFun: (row) => {
                this.openFormDia('edit', row);
              },
            },
            {
              name: 'å¯¼åº',
              type: 'text',
              clickFun: (row) => {
                this.handleDown(row)
              }
            },
            {
              name: 'å é¤',
              type: 'text',
              color: '#f56c6c',
              clickFun: (row) => {
                this.delPlan(row)
              },
            }
          ]
        }
      ],
      tableData: [],
      tableLoading: false,
      page: {
        size: 20,
        current: 1,
        total: 0,
      },
      formDia: false,
    };
  },
  mounted() {
    this.searchList()
  },
  // æ¹æ³éå
  methods: {
    // æ¥è¯¢åè¡¨
    searchList() {
      const entity = this.searchForm
      const page = this.page
      this.tableLoading = true
      pageInconsistentDistribution({ ...entity, ...page }).then(res => {
        this.tableLoading = false
        if (res.code === 201) return
        this.tableData = res.data.records
        this.page.total = res.data.total
      }).catch(err => {
        console.log('err---', err);
        this.tableLoading = false
      })
    },
    // å é¤
    delPlan(row) {
      this.$confirm('æ¤æä½å°æ°¸ä¹å é¤è¯¥æ°æ®, æ¯å¦ç»§ç»?', 'æç¤º', {
        confirmButtonText: 'ç¡®å®',
        cancelButtonText: 'åæ¶',
        type: 'warning'
      }).then(() => {
        this.tableLoading = true
        delInconsistentDistribution({ distributionId: row.distributionId }).then(res => {
          this.tableLoading = false
          if (res.code === 201) return
          this.$message.success('å é¤æå')
          this.searchList()
        }).catch(err => {
          this.tableLoading = false
          console.log('err---', err);
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: 'å·²åæ¶å é¤'
        });
      });
    },
    // æ°å¢ï¼ç¼è¾ï¼æ¹åå¼¹æ¡
    openFormDia(type, row) {
      this.formDia = true
      this.$nextTick(() => {
        this.$refs.formDia.openDia(type, row)
      })
    },
    // å¯¼åº
    handleDown(row) {
      exportInconsistentDistribution({ distributionId: row.distributionId }).then(res => {
        this.outLoading = false
        this.$message.success('å¯¼åºæå')
        const blob = new Blob([res], { type: 'application/msword' });
        this.$download.saveAs(blob, 'ä¸ç¬¦åé¡¹çåå¸' + '.docx');
      })
    },
    closeDia() {
      this.formDia = false
      this.searchList()
    },
    // éç½®æ¥è¯¢æ¡ä»¶
    resetSearchForm() {
      this.searchForm.distributionYear = '';
      this.searchList()
    },
    // åé¡µ
    pagination({ page, limit }) {
      this.page.current = page;
      this.page.size = limit;
      this.searchList();
    },
  }
};
</script>

<style scoped>
.view-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  padding-left: 20px;
}

.search-background {
  width: 100%;
  height: 80px;
  line-height: 80px;
  background-color: #ffffff;
  display: flex;
  position: relative;
}

.search-group {
  display: flex;
  align-items: center;
  margin: 0 20px;
}

.table {
  background-color: #ffffff;
}

.btn {
  position: absolute;
  right: 20px;
  top: 16px;
}
</style>

 src/views/CNAS/process/nonconformingWork/nonconformingItem/components/qualityInfo.vue

¶Ô±ÈÐÂÎÄ¼þ
@@ -0,0 +1,322 @@
<template>
  <div>
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="formDia" title="ä¸ç¬¦åå·¥ä½æ§å¶å"
      width="80%" @close="closeProcessingDia">
      <div style="height: 660px; overflow-y: auto">
        <table border="1" cellspacing="10" class="tables">
          <tr>
            <td class="first-title" rowspan="8">
              <p>ä¸ç¬¦åå·¥ä½æåµè®°å½</p>
            </td>
          </tr>
          <tr>
            <td class="td-title">
              <p>åçé¨é¨ï¼</p>
            </td>
            <td class="td-info">
              <span class="td-info1"> {{ form.occurrenceDepartment }}</span>
            </td>
            <td class="td-title">
              <p>é¨é¨è´è´£äººï¼</p>
            </td>
            <td class="td-info">
              <span class="td-info1"> {{ form.headDepartment }}</span>
            </td>
          </tr>
          <tr>
            <td class="td-title">
              <p>ä¸ç¬¦åå·¥ä½åç°éå¾ï¼</p>
            </td>
            <td class="td-info" colspan="3">
              <el-radio-group v-model="form.findWay" v-removeAriaHidden disabled>
                <el-radio :label="0">ç®¡çè¯å®¡</el-radio>
                <el-radio :label="1">åé¨å®¡æ ¸</el-radio>
                <el-radio :label="2">æ£æµè¿ç¨æ§å¶</el-radio>
                <el-radio :label="3">åé¨è´¨éæ§å¶</el-radio>
                <el-radio :label="4">åé¨çç£</el-radio>
                <el-radio :label="5">å¤é¨è¯å®¡</el-radio>
                <el-radio :label="6">å¤é¨æè¯</el-radio>
                <el-radio :label="7">å¶ä»</el-radio>
              </el-radio-group>
            </td>
          </tr>
          <tr>
            <td class="td-title">
              <p>ä¸ç¬¦åå·¥ä½çè¯¦ç»è®°å½ï¼</p>
            </td>
            <td class="td-info" colspan="3">
              <span class="td-info1"> {{ form.recordDetail }}</span>
            </td>
          </tr>
          <tr>
            <td class="td-title">
              <p>ä¸ç¬¦åå·¥ä½çä»¥ååæ¡æ¬¾å·ï¼</p>
            </td>
            <td class="td-info" colspan="3">
              <span class="td-info1"> {{ form.recordAccording }}</span>
            </td>
          </tr>
          <tr>
            <td class="td-title">
              <p>è¢«çç£äººï¼</p>
            </td>
            <td class="td-info">
              <span class="td-info1"> {{ form.supervisedUserName }}</span>
            </td>
            <td class="td-title">
              <p>è¢«çç£æ¥æï¼</p>
            </td>
            <td class="td-info">
              <span class="td-info1"> {{ form.supervisedTime }}</span>
            </td>
          </tr>
          <tr>
            <td class="td-title">
              <p>åç°é¨é¨ï¼</p>
            </td>
            <td class="td-info">
              {{ form.foundDepartment }}
            </td>
            <td class="td-title">
              <p>æ¶é´ï¼</p>
            </td>
            <td class="td-info">
              {{ form.recordTime }}
            </td>
          </tr>
          <tr>
            <td class="td-title">
              <p>è®°å½äººï¼</p>
            </td>
            <td class="td-info">
              {{ form.recordUserName }}
            </td>
            <td class="td-title">
              <p>è®°å½æ¶é´ï¼</p>
            </td>
            <td class="td-info">
              {{ form.recordTime }}
            </td>
          </tr>
          <tr>
            <td class="first-title" rowspan="3">
              <p>å¤çæªæ½</p>
            </td>
          </tr>
          <tr>
            <td class="td-title">
              <p>æ¶é¤ä¸ç¬¦åå·¥ä½æéåçæªæ½ï¼</p>
            </td>
            <td class="td-info" colspan="3">
              <span class="td-info1"> {{ form.eliminateMeasure }}</span>
            </td>
          </tr>
          <tr>
            <td class="td-title">
              <p>è´è´£äººï¼</p>
            </td>
            <td class="td-info">
              {{ form.actionsUserName }}
            </td>
            <td class="td-title">
              <p>å¤çæ¶é´ï¼</p>
            </td>
            <td class="td-info">
              {{ form.actionsTime }}
            </td>
          </tr>
          <tr>
            <td class="first-title" rowspan="4">
              <p>çº æ£æªæ½</p>
            </td>
          </tr>
          <tr>
            <td class="td-title">
              <p>æ¯å¦éè¦éåçº æ£æªæ½ï¼</p>
            </td>
            <td class="td-info" colspan="3">
              <el-radio-group v-model="form.isCorrect" v-removeAriaHidden disabled>
                <el-radio :label="0">å¦</el-radio>
                <el-radio :label="1">æ¯</el-radio>
              </el-radio-group>
            </td>
          </tr>
          <tr>
            <td class="td-title">
              <p>çº æ£æªæ½å¤çåè·è¸ªï¼</p>
            </td>
            <td class="td-info" colspan="3">
              <span class="td-info1"> {{ form.correctContent }}</span>
            </td>
          </tr>
          <tr>
            <td class="td-title">
              <p>è´è´£äººï¼</p>
            </td>
            <td class="td-info">
              {{ form.correctUserName }}
            </td>
            <td class="td-title">
              <p>å¤çæ¶é´ï¼</p>
            </td>
            <td class="td-info">
              {{ form.correctTime }}
            </td>
          </tr>
          <tr>
            <td class="first-title" rowspan="4">
              <p>æ¯å¦éç¥å®¢æ·åå¯æ¢å¤å·¥ä½</p>
            </td>
          </tr>
          <tr>
            <td class="td-title">
              <p>éç¥å®¢æ·ï¼</p>
            </td>
            <td class="td-info" colspan="3">
              <el-radio-group v-model="form.notifyCustomer" v-removeAriaHidden disabled>
                <el-radio :label="0">å¦</el-radio>
                <el-radio :label="1">æ¯</el-radio>
              </el-radio-group>
            </td>
          </tr>
          <tr>
            <td class="td-title">
              <p>æ¢å¤å·¥ä½ï¼</p>
            </td>
            <td class="td-info" colspan="3">
              <el-radio-group v-model="form.backToWork" v-removeAriaHidden disabled>
                <el-radio :label="0">å¦</el-radio>
                <el-radio :label="1">æ¯</el-radio>
              </el-radio-group>
            </td>
          </tr>
          <tr>
            <td class="td-title">
              <p>è´è´£äººï¼</p>
            </td>
            <td class="td-info">
              {{ form.qualityManagerUserName }}
            </td>
            <td class="td-title">
              <p>å¤çæ¶é´ï¼</p>
            </td>
            <td class="td-info">
              {{ form.qualityManagerTime }}
            </td>
          </tr>
        </table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getSuperviseDetailAccording
} from '@/api/cnas/process/nonconformingWork.js'
export default {
  name: 'qualityInfo',
  // import å¼å¥çç»ä»¶éè¦æ³¨å¥å°å¯¹è±¡ä¸æè½ä½¿ç¨
  components: {},
  data() {
    // è¿éåæ¾æ°æ®
    return {
      formDia: false,
      form: {
        occurrenceDepartment: '',
        headDepartment: '',
        findWay: '',
        recordDetail: '',
        recordAccording: '',
        supervisedUserName: '',
        supervisedTime: '',
        actionsUserName: '',
        eliminateMeasure: '',
        correctUserName: '',
        isCorrect: '',
        correctContent: '',
        recordUserName: '',
        recordTime: '',
        foundDepartment: '',
        actionsTime: '',
        correctTime: '',
        notifyCustomer: '',
        backToWork: '',
        qualityManagerUserName: '',
        qualityManagerTime: '',
      },
    };
  },
  // æ¹æ³éå
  methods: {
    openDia(row) {
      this.formDia = true
      this.searchInfo(row)
    },
    // æ¥è¯¢çæ§è®¡åè¯¦æå®æ½ä¿¡æ¯
    searchInfo(row) {
      this.form.qualityMonitorDetailsId = row.qualityMonitorDetailsId
      getSuperviseDetailAccording({ superviseDetailsId: row.superviseDetailsId }).then(res => {
        if (res.code === 201) return
        this.form = res.data
      }).catch(err => {
        console.log('err---', err);
      })
    },
    // å³éå¼¹æ¡
    closeProcessingDia() {
      this.formDia = false
    },
  }
};
</script>

<style scoped>
>>>.el-dialog {
  margin: 5vh auto 50px !important;
}

.tables {
  table-layout: fixed;
  width: 100%;
  margin-top: 10px;
}

.first-title {
  display: table-cell;
  width: 100px;
  /* è®¾ç½®ä¸ä¸ªåºå®å®½åº¦ */
  height: 200px;
  /* è®¾ç½®ä¸ä¸ªåºå®é«åº¦ */
  text-align: center;
  /* æ°´å¹³å±ä¸ */
  vertical-align: middle;
  /* åç´å±ä¸ */
  writing-mode: vertical-rl;
  /* æåç«ç´æå */
  padding: 10px 0;
}

.td-title {
  height: 40px;
  width: 170px;
  text-align: center;
  font-size: 14px;
  word-wrap: break-word;
  white-space: normal;
  padding: 6px;
}

.td-info {
  padding: 10px;
}

.td-info1 {
  display: inline-block;
  width: 100%;
  text-align: left;
  font-size: 14px;
  word-wrap: break-word;
  white-space: normal;
}
</style>

 src/views/CNAS/process/nonconformingWork/nonconformingItem/index.vue

¶Ô±ÈÐÂÎÄ¼þ
@@ -0,0 +1,197 @@
<template>
  <div>
    <div>
      <div class="search-background">
        <span class="search-group">
          <span style="width: 120px">åçé¨é¨ï¼</span>
          <el-input v-model="searchForm.occurrenceDepartment" clearable size="small"></el-input>
        </span>
        <span class="search-group">
          <el-button size="medium" @click="resetSearchForm">é ç½®</el-button>
          <el-button size="medium" type="primary" @click="searchList">æ¥ è¯¢</el-button>
        </span>
      </div>
      <div class="table">
        <div>
          <TableCard :showForm="false" :showTitle="false">
            <template v-slot:table>
              <limsTable :column="tableColumn" :height="'calc(100vh - 19em)'" :table-data="tableData"
                :table-loading="tableLoading" style="padding: 0 15px;margin-bottom: 16px" :page="page"
                @pagination="pagination">
              </limsTable>
            </template>
          </TableCard>
        </div>
      </div>
    </div>
    <quality-info v-if="qualityInfo" ref="qualityInfo"></quality-info>
  </div>
</template>

<script>
import limsTable from "@/components/Table/lims-table.vue";
import TableCard from '@/components/TableCard/index.vue';
import QualityInfo from './components/qualityInfo.vue';
import {
  pageSuperviseDetailAccording,
  superviseDetailAccordingExport
} from '@/api/cnas/process/nonconformingWork.js'

export default {
  name: 'a7-nonconforming-item',
  // import å¼å¥çç»ä»¶éè¦æ³¨å¥å°å¯¹è±¡ä¸æè½ä½¿ç¨
  components: { QualityInfo, TableCard, limsTable },
  data() {
    // è¿éåæ¾æ°æ®
    return {
      searchForm: {
        occurrenceDepartment: '',
      },
      tableColumn: [
        {
          label: 'åçé¨é¨',
          prop: 'occurrenceDepartment',
          minWidth: '100'
        },
        {
          label: 'é¨é¨è´è´£äºº',
          prop: 'headDepartment',
          minWidth: '100'
        },
        {
          label: 'åç°éå¾',
          prop: 'findWay',
          minWidth: '100'
        },
        {
          label: 'è¯¦ç»è®°å½',
          prop: 'recordDetail',
          minWidth: '100'
        },
        {
          label: 'ä¾æ®åæ¡æ¬¾å·',
          prop: 'recordAccording',
          minWidth: '100'
        },
        {
          label: 'åç°é¨é¨',
          prop: 'foundDepartment',
          minWidth: '100'
        },
        {
          label: 'è¢«çç£äºº',
          prop: 'supervisedUserName',
          minWidth: '100'
        },
        {
          dataType: 'action',
          minWidth: '60',
          label: 'æä½',
          operation: [
            {
              name: 'æ¥ç',
              type: 'text',
              clickFun: (row) => {
                this.viewInfo(row);
              },
            },
            {
              name: 'å¯¼åº',
              type: 'text',
              clickFun: (row) => {
                this.openDownloadDia(row);
              },
            },
          ]
        }
      ],
      tableData: [],
      tableLoading: false,
      page: {
        size: 20,
        current: 1,
        total: 0,
      },
      qualityInfo: false,
    };
  },
  mounted() {
    this.searchList()
  },
  // æ¹æ³éå
  methods: {
    // æ¥è¯¢åè¡¨
    searchList() {
      const entity = {
        occurrenceDepartment: this.searchForm.occurrenceDepartment,
      }
      const page = this.page
      this.tableLoading = true
      pageSuperviseDetailAccording({ ...entity, ...page }).then(res => {
        this.tableLoading = false
        if (res.code === 201) return
        this.tableData = res.data.records
        this.page.total = res.data.total
      }).catch(err => {
        console.log('err---', err);
        this.tableLoading = false
      })
    },
    // éç½®æ¥è¯¢æ¡ä»¶
    resetSearchForm() {
      this.searchForm.occurrenceDepartment = '';
      this.searchList()
    },
    viewInfo(row) {
      this.qualityInfo = true
      this.$nextTick(() => {
        this.$refs.qualityInfo.openDia(row)
      })
    },
    // å¯¼åº
    openDownloadDia(row) {
      superviseDetailAccordingExport({ superviseDetailsId: row.superviseDetailsId }).then(res => {
        this.$message.success('å¯¼åºæå')
        const blob = new Blob([res], { type: 'application/msword' });
        this.$download.saveAs(blob, 'ä¸ç¬¦åé¡¹å¯¼åº' + '.docx');
      }).catch(err => {
        console.log('err---', err);
      })
    },
    // åé¡µ
    pagination({ page, limit }) {
      this.page.current = page;
      this.page.size = limit;
      this.searchList();
    },
  }
};
</script>

<style scoped>
.view-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  padding-left: 20px;
}

.search-background {
  width: 100%;
  height: 80px;
  line-height: 80px;
  background-color: #ffffff;
  display: flex;
}

.search-group {
  display: flex;
  align-items: center;
  margin: 0 20px;
}

.table {
  background-color: #ffffff;
}
</style>

 src/views/standard/model/index.vue

@@ -31,7 +31,7 @@
      </div>
    </el-dialog>
    <el-dialog :before-close="closeCopyTem" :close-on-click-modal="false" :close-on-press-escape="false"
      :visible.sync="isShowCopyTem" :title="title" width="35%">
      :visible.sync="isShowCopyTem" :title="title" width="35%" :modal-append-to-body="false">
      <el-form ref="copyForm" :model="copyForm" :rules="copyFormRules" label-position="right" label-width="80px">
        <el-form-item label="æ¨¡çç¼å·" prop="number">
          <el-input v-model="copyForm.number" clearable size="small"></el-input>
@@ -384,6 +384,10 @@
</script>

<style scoped>
/* >>>.el-dialog__wrapper {
  z-index: 100 !important;
} */

.search {
  background-color: #fff;
  height: 80px;

			@@ -213,6 +213,12 @@
			color: #fff;
			opacity: 0.5;
			}
			/* .v-modal {
			z-index: 1 !important;
			} */
			.luckysheet-cols-menu {
			z-index: 9999 !important;
			}
			</style>
			</head>
			<body>
			@@ -225,7 +231,10 @@
			</div>
			</div>
			</body>
			<script type='text/javascript' src='http://192.168.21.53:9001/web-apps/apps/api/documents/api.js'></script>
			<script
			type="text/javascript"
			src="http://192.168.21.53:9001/web-apps/apps/api/documents/api.js"
			></script>
			<script src="<%= BASE_URL %>luckysheet/plugins/js/plugin.js"></script>
			<script src="<%= BASE_URL %>luckysheet/luckysheet.umd.js"></script>
			<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>

¶Ô±ÈÐÂÎÄ¼þ
			@@ -0,0 +1,85 @@
			// ä¸ç¬¦åå·¥ä½ç¸å³æ¥å£
			import request from "@/utils/request";

			//æ¥è¯¢çç£è®°å½ä¸ç¬¦åæ§å¶ä¿¡æ¯åè¡¨
			export function pageSuperviseDetailAccording(query) {
			return request({
			url: "/qualitySupervise/pageSuperviseDetailAccording",
			method: "get",
			params: query,
			});
			}

			//å¯¼åºä¸ç¬¦åé¡¹
			export function superviseDetailAccordingExport(query) {
			return request({
			url: "/qualitySupervise/superviseDetailAccordingExport",
			method: "get",
			responseType: "blob",
			params: query,
			});
			}

			//æ¥è¯¢çç£è®°å½ä¸ç¬¦åæ§å¶ä¿¡æ¯
			export function getSuperviseDetailAccording(query) {
			return request({
			url: "/qualitySupervise/getSuperviseDetailAccording",
			method: "get",
			params: query,
			});
			}

			//ä¸ç¬¦åé¡¹çåå¸åé¡µæ¥è¯¢
			export function pageInconsistentDistribution(query) {
			return request({
			url: "/inconsistentDistribution/pageInconsistentDistribution",
			method: "get",
			params: query,
			});
			}

			//ä¸ç¬¦åé¡¹çåå¸å é¤
			export function delInconsistentDistribution(query) {
			return request({
			url: "/inconsistentDistribution/delInconsistentDistribution",
			method: "delete",
			params: query,
			});
			}

			//å¯¼åºä¸ç¬¦åé¡¹çåå¸
			export function exportInconsistentDistribution(query) {
			return request({
			url: "/inconsistentDistribution/exportInconsistentDistribution",
			method: "get",
			responseType: "blob",
			params: query,
			});
			}

			//ä¸ç¬¦åé¡¹çåå¸è¯¦æ
			export function getInconsistentDistributionOne(query) {
			return request({
			url: "/inconsistentDistribution/getInconsistentDistributionOne",
			method: "get",
			params: query,
			});
			}

			// ä¸ç¬¦åé¡¹çåå¸æ°å¢
			export function addInconsistentDistribution(data) {
			return request({
			url: "/inconsistentDistribution/addInconsistentDistribution",
			method: "post",
			data: data,
			});
			}

			// ä¸ç¬¦åé¡¹çåå¸ä¿®æ¹
			export function updateInconsistentDistribution(data) {
			return request({
			url: "/inconsistentDistribution/updateInconsistentDistribution",
			method: "post",
			data: data,
			});
			}

			@@ -7,6 +7,7 @@
			height: 100%;
			left: 0px;
			top: 0px;
			z-index: 99999 !important;
			}
			</style>
			<style>
			@@ -19,6 +20,7 @@
			border-color: transparent;
			cursor: pointer;
			}

			#luckysheet .returnView {
			width: 50px;
			height: 26px;
			@@ -43,6 +45,10 @@
			#luckysheet .save:active {
			opacity: 0.7;
			}

			/* #luckysheet-postil-overshow {
			z-index: 9999 !important;
			} */
			</style>
			<template>
			<div id="luckysheet"></div>

¶Ô±ÈÐÂÎÄ¼þ
			@@ -0,0 +1,232 @@
			<template>
			<div>
			<el-dialog v-loading="diaLoading" :close-on-click-modal="false" :close-on-press-escape="false"
			:visible.sync="formDia" title="ä¸ç¬¦åé¡¹çåå¸" width="90%" @close="closeDia">
			<table border="1" cellspacing="10" class="table">
			<tr>
			<td>ç« èå·</td>
			<th class="div-with-line">
			<span style="float: left;">è¦ç´ </span>
			<span style="float: right;">é¨é¨</span>
			</th>
			<th>ä¸»ä»»</th>
			<th>ææ¯è´è´£äºº</th>
			<th>è´¨éè´è´£äºº</th>
			<th>ç»¼åå®¤</th>
			<th>è¯éªå®¤</th>
			<th>åè®¡</th>
			<th>å %</th>
			</tr>
			<tr v-for="(item, index) in distributionDetailList" :key="item.value">
			<td>{{ item.chapterNumber }}</td>
			<th>{{ item.essentials }}</th>
			<th>
			<el-input-number v-model="item.director" :precision="0" clearable size="small"></el-input-number>
			</th>
			<th>
			<el-input-number v-model="item.technology" :precision="0" clearable size="small"></el-input-number>
			</th>
			<th>
			<el-input-number v-model="item.quality" :precision="0" clearable size="small"></el-input-number>
			</th>
			<th>
			<el-input-number v-model="item.comprehensive" :precision="0" clearable size="small"></el-input-number>
			</th>
			<th>
			<el-input-number v-model="item.testing" :precision="0" clearable size="small"></el-input-number>
			</th>
			<th>
			{{ item.total }}
			</th>
			<th>
			{{ (item.proportion ? item.proportion : 0) + '%' }}
			</th>
			</tr>
			<tr>
			<td> </td>
			<th>
			å æ¯
			</th>
			<th>
			{{ (distributionProportion.director ? distributionProportion.director : 0) + '%' }}
			</th>
			<th>
			{{ (distributionProportion.technology ? distributionProportion.technology : 0) + '%' }}
			</th>
			<th>
			{{ (distributionProportion.quality ? distributionProportion.quality : 0) + '%' }}
			</th>
			<th>
			{{ (distributionProportion.comprehensive ? distributionProportion.comprehensive : 0) + '%' }}
			</th>
			<th>
			{{ (distributionProportion.testing ? distributionProportion.testing : 0) + '%' }}
			</th>
			<th>
			{{ distributionProportion.total ? distributionProportion.total : 0 }}
			</th>
			<th> </th>
			</tr>
			</table>
			<span slot="footer" class="dialog-footer">
			<el-button @click="closeDia">å æ¶</el-button>
			<el-button :loading="loading" type="primary" @click="handleEdit">æ äº¤</el-button>
			</span>
			</el-dialog>
			</div>
			</template>

			<script>
			import {
			getInconsistentDistributionOne,
			addInconsistentDistribution,
			updateInconsistentDistribution
			} from '@/api/cnas/process/nonconformingWork.js'
			export default {
			name: 'formDia',
			// import å¼å¥çç»ä»¶éè¦æ³¨å¥å°å¯¹è±¡ä¸æè½ä½¿ç¨
			components: {},
			data() {
			// è¿éåæ¾æ°æ®
			return {
			formDia: false,
			diaLoading: false,
			loading: false,
			distributionDetailList: [],
			form: {

			},
			distributionProportion: {}
			};
			},
			mounted() {

			},
			// æ¹æ³éå
			methods: {
			// æå¼å¼¹æ¡
			openDia(type, row) {
			this.formDia = true
			this.operationType = type
			if (type !== 'add') {
			this.searchInfo(row)
			} else {
			this.selectEnumByCategory()
			}
			},
			// æ¥è¯¢è¯¦æ
			searchInfo(row) {
			this.diaLoading = true
			getInconsistentDistributionOne({ distributionId: row.distributionId }).then(res => {
			this.diaLoading = false
			if (res.code === 201) return
			this.form = res.data
			this.distributionDetailList = this.form.distributionDetailList
			this.distributionProportion = this.form.distributionProportion
			}).catch(err => {
			console.log(err)
			this.diaLoading = false
			})
			},
			// æäº¤å¼¹æ¡æ°æ®
			handleEdit() {
			const date = new Date();
			const year = date.getFullYear();
			this.loading = true
			const internalPlan = this.HaveJson(this.form)
			internalPlan.distributionYear = year
			internalPlan.distributionDetailList = this.HaveJson(this.distributionDetailList)
			if (this.operationType === 'add') {
			addInconsistentDistribution(internalPlan).then(res => {
			this.loading = false
			if (res.code === 201) return
			this.$message.success('æä½æå')
			this.closeDia()
			}).catch(err => {
			console.log('err---', err);
			this.loading = false
			})
			} else if (this.operationType === 'edit') {
			updateInconsistentDistribution(internalPlan).then(res => {
			this.loading = false
			if (res.code === 201) return
			this.$message.success('æä½æå')
			this.closeDia()
			}).catch(err => {
			console.log('err---', err);
			this.loading = false
			})
			}
			},
			closeDia() {
			this.formDia = false
			this.$emit('closeDia')
			},
			selectEnumByCategory() {
			this.distributionDetailList = []
			// è¦ç´
			this.getDicts("essential").then((response) => {
			let arr = this.dictToValue(response.data)
			arr.map((item) => {
			const obj = Object.assign({
			essentials: item.label,
			chapterNumber: item.value,
			})
			this.distributionDetailList.push(obj)
			})
			});
			},
			}
			};
			</script>

			<style scoped>
			>>>.el-dialog {
			margin: 6vh auto 50px !important;
			}

			>>>.el-dialog__body {
			max-height: 68vh;
			overflow-y: auto;
			}

			>>>.is-required {
			margin-bottom: 6px;
			}

			.table {
			width: 100%;
			margin-top: 20px;
			}

			.table td {
			width: 30px;
			text-align: center;
			}

			.table th {
			width: 70px;
			height: 70px;
			text-align: center;
			}

			.div-with-line {
			width: 70px;
			height: 70px;
			position: relative;
			/overflow: hidden; / éèæº¢åºåå®¹ */
			}

			.div-with-line::after {
			content: '';
			position: absolute;
			bottom: 0;
			height: 1px;
			background-color: #000000;
			left: 50%;
			transform: translateX(-50%) rotate(45deg);
			transform-origin: center 50%;
			top: 50%;
			width: 100px;
			}
			</style>

¶Ô±ÈÐÂÎÄ¼þ
			@@ -0,0 +1,238 @@
			<template>
			<div>
			<div>
			<!-- <div class="view-title">
			<span>ä¸ç¬¦åé¡¹çåå¸</span>
			<span>
			<el-button size="medium" type="primary" @click="openFormDia('add')">æ° å¢</el-button>
			</span>
			</div> -->
			<div class="search-background">
			<span class="search-group">
			<span style="width: 120px">å¹´ä»½ï¼</span>
			<el-input v-model="searchForm.distributionYear" clearable size="small"></el-input>
			</span>
			<span class="search-group">
			<el-button size="medium" @click="resetSearchForm">é ç½®</el-button>
			<el-button size="medium" type="primary" @click="searchList">æ¥ è¯¢</el-button>
			</span>
			<div class="btn">
			<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 - 19em)'" :table-data="tableData"
			:table-loading="tableLoading" style="padding: 0 15px;margin-bottom: 16px" :page="page"
			@pagination="pagination">
			</limsTable>
			</template>
			</TableCard>
			</div>
			</div>
			</div>
			<form-dia v-if="formDia" ref="formDia" @closeDia="closeDia"></form-dia>
			</div>
			</template>

			<script>
			import limsTable from "@/components/Table/lims-table.vue";
			import TableCard from '@/components/TableCard/index.vue';
			import FormDia from './components/formDia.vue';
			import {
			pageInconsistentDistribution,
			delInconsistentDistribution,
			exportInconsistentDistribution,
			} from '@/api/cnas/process/nonconformingWork.js'

			export default {
			name: 'a7-distribution-of-nonconforming',
			// import å¼å¥çç»ä»¶éè¦æ³¨å¥å°å¯¹è±¡ä¸æè½ä½¿ç¨
			components: { FormDia, TableCard, limsTable },
			data() {
			// è¿éåæ¾æ°æ®
			return {
			searchForm: {
			distributionYear: '',
			},
			tableColumn: [
			{
			label: 'å¹´ä»½',
			prop: 'distributionYear',
			minWidth: '100'
			},
			{
			label: 'åå»ºäºº',
			prop: 'createUserName',
			minWidth: '100'
			},
			{
			label: 'åå»ºæ¶é´',
			prop: 'createTime',
			minWidth: '100'
			},
			{
			label: 'ä¿®æ¹äºº',
			prop: 'updateUserName',
			minWidth: '100'
			},
			{
			label: 'ä¿®æ¹æ¶é´',
			prop: 'updateTime',
			minWidth: '100'
			},
			{
			dataType: 'action',
			minWidth: '220',
			label: 'æä½',
			operation: [
			{
			name: 'ç¼è¾',
			type: 'text',
			clickFun: (row) => {
			this.openFormDia('edit', row);
			},
			},
			{
			name: 'å¯¼åº',
			type: 'text',
			clickFun: (row) => {
			this.handleDown(row)
			}
			},
			{
			name: 'å é¤',
			type: 'text',
			color: '#f56c6c',
			clickFun: (row) => {
			this.delPlan(row)
			},
			}
			]
			}
			],
			tableData: [],
			tableLoading: false,
			page: {
			size: 20,
			current: 1,
			total: 0,
			},
			formDia: false,
			};
			},
			mounted() {
			this.searchList()
			},
			// æ¹æ³éå
			methods: {
			// æ¥è¯¢åè¡¨
			searchList() {
			const entity = this.searchForm
			const page = this.page
			this.tableLoading = true
			pageInconsistentDistribution({ ...entity, ...page }).then(res => {
			this.tableLoading = false
			if (res.code === 201) return
			this.tableData = res.data.records
			this.page.total = res.data.total
			}).catch(err => {
			console.log('err---', err);
			this.tableLoading = false
			})
			},
			// å é¤
			delPlan(row) {
			this.$confirm('æ¤æä½å°æ°¸ä¹å é¤è¯¥æ°æ®, æ¯å¦ç»§ç»?', 'æç¤º', {
			confirmButtonText: 'ç¡®å®',
			cancelButtonText: 'åæ¶',
			type: 'warning'
			}).then(() => {
			this.tableLoading = true
			delInconsistentDistribution({ distributionId: row.distributionId }).then(res => {
			this.tableLoading = false
			if (res.code === 201) return
			this.$message.success('å é¤æå')
			this.searchList()
			}).catch(err => {
			this.tableLoading = false
			console.log('err---', err);
			})
			}).catch(() => {
			this.$message({
			type: 'info',
			message: 'å·²åæ¶å é¤'
			});
			});
			},
			// æ°å¢ï¼ç¼è¾ï¼æ¹åå¼¹æ¡
			openFormDia(type, row) {
			this.formDia = true
			this.$nextTick(() => {
			this.$refs.formDia.openDia(type, row)
			})
			},
			// å¯¼åº
			handleDown(row) {
			exportInconsistentDistribution({ distributionId: row.distributionId }).then(res => {
			this.outLoading = false
			this.$message.success('å¯¼åºæå')
			const blob = new Blob([res], { type: 'application/msword' });
			this.$download.saveAs(blob, 'ä¸ç¬¦åé¡¹çåå¸' + '.docx');
			})
			},
			closeDia() {
			this.formDia = false
			this.searchList()
			},
			// éç½®æ¥è¯¢æ¡ä»¶
			resetSearchForm() {
			this.searchForm.distributionYear = '';
			this.searchList()
			},
			// åé¡µ
			pagination({ page, limit }) {
			this.page.current = page;
			this.page.size = limit;
			this.searchList();
			},
			}
			};
			</script>

			<style scoped>
			.view-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 60px;
			padding-left: 20px;
			}

			.search-background {
			width: 100%;
			height: 80px;
			line-height: 80px;
			background-color: #ffffff;
			display: flex;
			position: relative;
			}

			.search-group {
			display: flex;
			align-items: center;
			margin: 0 20px;
			}

			.table {
			background-color: #ffffff;
			}

			.btn {
			position: absolute;
			right: 20px;
			top: 16px;
			}
			</style>

¶Ô±ÈÐÂÎÄ¼þ
			@@ -0,0 +1,322 @@
			<template>
			<div>
			<el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="formDia" title="ä¸ç¬¦åå·¥ä½æ§å¶å"
			width="80%" @close="closeProcessingDia">
			<div style="height: 660px; overflow-y: auto">
			<table border="1" cellspacing="10" class="tables">
			<tr>
			<td class="first-title" rowspan="8">
			<p>ä¸ç¬¦åå·¥ä½æåµè®°å½</p>
			</td>
			</tr>
			<tr>
			<td class="td-title">
			<p>åçé¨é¨ï¼</p>
			</td>
			<td class="td-info">
			<span class="td-info1"> {{ form.occurrenceDepartment }}</span>
			</td>
			<td class="td-title">
			<p>é¨é¨è´è´£äººï¼</p>
			</td>
			<td class="td-info">
			<span class="td-info1"> {{ form.headDepartment }}</span>
			</td>
			</tr>
			<tr>
			<td class="td-title">
			<p>ä¸ç¬¦åå·¥ä½åç°éå¾ï¼</p>
			</td>
			<td class="td-info" colspan="3">
			<el-radio-group v-model="form.findWay" v-removeAriaHidden disabled>
			<el-radio :label="0">ç®¡çè¯å®¡</el-radio>
			<el-radio :label="1">åé¨å®¡æ ¸</el-radio>
			<el-radio :label="2">æ£æµè¿ç¨æ§å¶</el-radio>
			<el-radio :label="3">åé¨è´¨éæ§å¶</el-radio>
			<el-radio :label="4">åé¨çç£</el-radio>
			<el-radio :label="5">å¤é¨è¯å®¡</el-radio>
			<el-radio :label="6">å¤é¨æè¯</el-radio>
			<el-radio :label="7">å¶ä»</el-radio>
			</el-radio-group>
			</td>
			</tr>
			<tr>
			<td class="td-title">
			<p>ä¸ç¬¦åå·¥ä½çè¯¦ç»è®°å½ï¼</p>
			</td>
			<td class="td-info" colspan="3">
			<span class="td-info1"> {{ form.recordDetail }}</span>
			</td>
			</tr>
			<tr>
			<td class="td-title">
			<p>ä¸ç¬¦åå·¥ä½çä»¥ååæ¡æ¬¾å·ï¼</p>
			</td>
			<td class="td-info" colspan="3">
			<span class="td-info1"> {{ form.recordAccording }}</span>
			</td>
			</tr>
			<tr>
			<td class="td-title">
			<p>è¢«çç£äººï¼</p>
			</td>
			<td class="td-info">
			<span class="td-info1"> {{ form.supervisedUserName }}</span>
			</td>
			<td class="td-title">
			<p>è¢«çç£æ¥æï¼</p>
			</td>
			<td class="td-info">
			<span class="td-info1"> {{ form.supervisedTime }}</span>
			</td>
			</tr>
			<tr>
			<td class="td-title">
			<p>åç°é¨é¨ï¼</p>
			</td>
			<td class="td-info">
			{{ form.foundDepartment }}
			</td>
			<td class="td-title">
			<p>æ¶é´ï¼</p>
			</td>
			<td class="td-info">
			{{ form.recordTime }}
			</td>
			</tr>
			<tr>
			<td class="td-title">
			<p>è®°å½äººï¼</p>
			</td>
			<td class="td-info">
			{{ form.recordUserName }}
			</td>
			<td class="td-title">
			<p>è®°å½æ¶é´ï¼</p>
			</td>
			<td class="td-info">
			{{ form.recordTime }}
			</td>
			</tr>
			<tr>
			<td class="first-title" rowspan="3">
			<p>å¤çæªæ½</p>
			</td>
			</tr>
			<tr>
			<td class="td-title">
			<p>æ¶é¤ä¸ç¬¦åå·¥ä½æéåçæªæ½ï¼</p>
			</td>
			<td class="td-info" colspan="3">
			<span class="td-info1"> {{ form.eliminateMeasure }}</span>
			</td>
			</tr>
			<tr>
			<td class="td-title">
			<p>è´è´£äººï¼</p>
			</td>
			<td class="td-info">
			{{ form.actionsUserName }}
			</td>
			<td class="td-title">
			<p>å¤çæ¶é´ï¼</p>
			</td>
			<td class="td-info">
			{{ form.actionsTime }}
			</td>
			</tr>
			<tr>
			<td class="first-title" rowspan="4">
			<p>çº æ£æªæ½</p>
			</td>
			</tr>
			<tr>
			<td class="td-title">
			<p>æ¯å¦éè¦éåçº æ£æªæ½ï¼</p>
			</td>
			<td class="td-info" colspan="3">
			<el-radio-group v-model="form.isCorrect" v-removeAriaHidden disabled>
			<el-radio :label="0">å¦</el-radio>
			<el-radio :label="1">æ¯</el-radio>
			</el-radio-group>
			</td>
			</tr>
			<tr>
			<td class="td-title">
			<p>çº æ£æªæ½å¤çåè·è¸ªï¼</p>
			</td>
			<td class="td-info" colspan="3">
			<span class="td-info1"> {{ form.correctContent }}</span>
			</td>
			</tr>
			<tr>
			<td class="td-title">
			<p>è´è´£äººï¼</p>
			</td>
			<td class="td-info">
			{{ form.correctUserName }}
			</td>
			<td class="td-title">
			<p>å¤çæ¶é´ï¼</p>
			</td>
			<td class="td-info">
			{{ form.correctTime }}
			</td>
			</tr>
			<tr>
			<td class="first-title" rowspan="4">
			<p>æ¯å¦éç¥å®¢æ·åå¯æ¢å¤å·¥ä½</p>
			</td>
			</tr>
			<tr>
			<td class="td-title">
			<p>éç¥å®¢æ·ï¼</p>
			</td>
			<td class="td-info" colspan="3">
			<el-radio-group v-model="form.notifyCustomer" v-removeAriaHidden disabled>
			<el-radio :label="0">å¦</el-radio>
			<el-radio :label="1">æ¯</el-radio>
			</el-radio-group>
			</td>
			</tr>
			<tr>
			<td class="td-title">
			<p>æ¢å¤å·¥ä½ï¼</p>
			</td>
			<td class="td-info" colspan="3">
			<el-radio-group v-model="form.backToWork" v-removeAriaHidden disabled>
			<el-radio :label="0">å¦</el-radio>
			<el-radio :label="1">æ¯</el-radio>
			</el-radio-group>
			</td>
			</tr>
			<tr>
			<td class="td-title">
			<p>è´è´£äººï¼</p>
			</td>
			<td class="td-info">
			{{ form.qualityManagerUserName }}
			</td>
			<td class="td-title">
			<p>å¤çæ¶é´ï¼</p>
			</td>
			<td class="td-info">
			{{ form.qualityManagerTime }}
			</td>
			</tr>
			</table>
			</div>
			</el-dialog>
			</div>
			</template>

			<script>
			import {
			getSuperviseDetailAccording
			} from '@/api/cnas/process/nonconformingWork.js'
			export default {
			name: 'qualityInfo',
			// import å¼å¥çç»ä»¶éè¦æ³¨å¥å°å¯¹è±¡ä¸æè½ä½¿ç¨
			components: {},
			data() {
			// è¿éåæ¾æ°æ®
			return {
			formDia: false,
			form: {
			occurrenceDepartment: '',
			headDepartment: '',
			findWay: '',
			recordDetail: '',
			recordAccording: '',
			supervisedUserName: '',
			supervisedTime: '',
			actionsUserName: '',
			eliminateMeasure: '',
			correctUserName: '',
			isCorrect: '',
			correctContent: '',
			recordUserName: '',
			recordTime: '',
			foundDepartment: '',
			actionsTime: '',
			correctTime: '',
			notifyCustomer: '',
			backToWork: '',
			qualityManagerUserName: '',
			qualityManagerTime: '',
			},
			};
			},
			// æ¹æ³éå
			methods: {
			openDia(row) {
			this.formDia = true
			this.searchInfo(row)
			},
			// æ¥è¯¢çæ§è®¡åè¯¦æå®æ½ä¿¡æ¯
			searchInfo(row) {
			this.form.qualityMonitorDetailsId = row.qualityMonitorDetailsId
			getSuperviseDetailAccording({ superviseDetailsId: row.superviseDetailsId }).then(res => {
			if (res.code === 201) return
			this.form = res.data
			}).catch(err => {
			console.log('err---', err);
			})
			},
			// å³éå¼¹æ¡
			closeProcessingDia() {
			this.formDia = false
			},
			}
			};
			</script>

			<style scoped>
			>>>.el-dialog {
			margin: 5vh auto 50px !important;
			}

			.tables {
			table-layout: fixed;
			width: 100%;
			margin-top: 10px;
			}

			.first-title {
			display: table-cell;
			width: 100px;
			/* è®¾ç½®ä¸ä¸ªåºå®å®½åº¦ */
			height: 200px;
			/* è®¾ç½®ä¸ä¸ªåºå®é«åº¦ */
			text-align: center;
			/* æ°´å¹³å±ä¸ */
			vertical-align: middle;
			/* åç´å±ä¸ */
			writing-mode: vertical-rl;
			/* æåç«ç´æå */
			padding: 10px 0;
			}

			.td-title {
			height: 40px;
			width: 170px;
			text-align: center;
			font-size: 14px;
			word-wrap: break-word;
			white-space: normal;
			padding: 6px;
			}

			.td-info {
			padding: 10px;
			}

			.td-info1 {
			display: inline-block;
			width: 100%;
			text-align: left;
			font-size: 14px;
			word-wrap: break-word;
			white-space: normal;
			}
			</style>

¶Ô±ÈÐÂÎÄ¼þ
			@@ -0,0 +1,197 @@
			<template>
			<div>
			<div>
			<div class="search-background">
			<span class="search-group">
			<span style="width: 120px">åçé¨é¨ï¼</span>
			<el-input v-model="searchForm.occurrenceDepartment" clearable size="small"></el-input>
			</span>
			<span class="search-group">
			<el-button size="medium" @click="resetSearchForm">é ç½®</el-button>
			<el-button size="medium" type="primary" @click="searchList">æ¥ è¯¢</el-button>
			</span>
			</div>
			<div class="table">
			<div>
			<TableCard :showForm="false" :showTitle="false">
			<template v-slot:table>
			<limsTable :column="tableColumn" :height="'calc(100vh - 19em)'" :table-data="tableData"
			:table-loading="tableLoading" style="padding: 0 15px;margin-bottom: 16px" :page="page"
			@pagination="pagination">
			</limsTable>
			</template>
			</TableCard>
			</div>
			</div>
			</div>
			<quality-info v-if="qualityInfo" ref="qualityInfo"></quality-info>
			</div>
			</template>

			<script>
			import limsTable from "@/components/Table/lims-table.vue";
			import TableCard from '@/components/TableCard/index.vue';
			import QualityInfo from './components/qualityInfo.vue';
			import {
			pageSuperviseDetailAccording,
			superviseDetailAccordingExport
			} from '@/api/cnas/process/nonconformingWork.js'

			export default {
			name: 'a7-nonconforming-item',
			// import å¼å¥çç»ä»¶éè¦æ³¨å¥å°å¯¹è±¡ä¸æè½ä½¿ç¨
			components: { QualityInfo, TableCard, limsTable },
			data() {
			// è¿éåæ¾æ°æ®
			return {
			searchForm: {
			occurrenceDepartment: '',
			},
			tableColumn: [
			{
			label: 'åçé¨é¨',
			prop: 'occurrenceDepartment',
			minWidth: '100'
			},
			{
			label: 'é¨é¨è´è´£äºº',
			prop: 'headDepartment',
			minWidth: '100'
			},
			{
			label: 'åç°éå¾',
			prop: 'findWay',
			minWidth: '100'
			},
			{
			label: 'è¯¦ç»è®°å½',
			prop: 'recordDetail',
			minWidth: '100'
			},
			{
			label: 'ä¾æ®åæ¡æ¬¾å·',
			prop: 'recordAccording',
			minWidth: '100'
			},
			{
			label: 'åç°é¨é¨',
			prop: 'foundDepartment',
			minWidth: '100'
			},
			{
			label: 'è¢«çç£äºº',
			prop: 'supervisedUserName',
			minWidth: '100'
			},
			{
			dataType: 'action',
			minWidth: '60',
			label: 'æä½',
			operation: [
			{
			name: 'æ¥ç',
			type: 'text',
			clickFun: (row) => {
			this.viewInfo(row);
			},
			},
			{
			name: 'å¯¼åº',
			type: 'text',
			clickFun: (row) => {
			this.openDownloadDia(row);
			},
			},
			]
			}
			],
			tableData: [],
			tableLoading: false,
			page: {
			size: 20,
			current: 1,
			total: 0,
			},
			qualityInfo: false,
			};
			},
			mounted() {
			this.searchList()
			},
			// æ¹æ³éå
			methods: {
			// æ¥è¯¢åè¡¨
			searchList() {
			const entity = {
			occurrenceDepartment: this.searchForm.occurrenceDepartment,
			}
			const page = this.page
			this.tableLoading = true
			pageSuperviseDetailAccording({ ...entity, ...page }).then(res => {
			this.tableLoading = false
			if (res.code === 201) return
			this.tableData = res.data.records
			this.page.total = res.data.total
			}).catch(err => {
			console.log('err---', err);
			this.tableLoading = false
			})
			},
			// éç½®æ¥è¯¢æ¡ä»¶
			resetSearchForm() {
			this.searchForm.occurrenceDepartment = '';
			this.searchList()
			},
			viewInfo(row) {
			this.qualityInfo = true
			this.$nextTick(() => {
			this.$refs.qualityInfo.openDia(row)
			})
			},
			// å¯¼åº
			openDownloadDia(row) {
			superviseDetailAccordingExport({ superviseDetailsId: row.superviseDetailsId }).then(res => {
			this.$message.success('å¯¼åºæå')
			const blob = new Blob([res], { type: 'application/msword' });
			this.$download.saveAs(blob, 'ä¸ç¬¦åé¡¹å¯¼åº' + '.docx');
			}).catch(err => {
			console.log('err---', err);
			})
			},
			// åé¡µ
			pagination({ page, limit }) {
			this.page.current = page;
			this.page.size = limit;
			this.searchList();
			},
			}
			};
			</script>

			<style scoped>
			.view-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 60px;
			padding-left: 20px;
			}

			.search-background {
			width: 100%;
			height: 80px;
			line-height: 80px;
			background-color: #ffffff;
			display: flex;
			}

			.search-group {
			display: flex;
			align-items: center;
			margin: 0 20px;
			}

			.table {
			background-color: #ffffff;
			}
			</style>

			@@ -31,7 +31,7 @@
			</div>
			</el-dialog>
			<el-dialog :before-close="closeCopyTem" :close-on-click-modal="false" :close-on-press-escape="false"
			:visible.sync="isShowCopyTem" :title="title" width="35%">
			:visible.sync="isShowCopyTem" :title="title" width="35%" :modal-append-to-body="false">
			<el-form ref="copyForm" :model="copyForm" :rules="copyFormRules" label-position="right" label-width="80px">
			<el-form-item label="æ¨¡çç¼å·" prop="number">
			<el-input v-model="copyForm.number" clearable size="small"></el-input>
			@@ -384,6 +384,10 @@
			</script>

			<style scoped>
			/* >>>.el-dialog__wrapper {
			z-index: 100 !important;
			} */

			.search {
			background-color: #fff;
			height: 80px;