完成7.7质量监控计划

licp

2024-12-19 3b38e143d7167738b9a1fb5a88cbf103d05752fa

完成7.7质量监控计划

 src/assets/api/api.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,161 @@
/*
 * @FileDescription: controller.js太乱，这个是正常格式的api，将来用于替换controller
 * @Author: æ›¹ç¿
 * @Date: 2024/09/30
 * @LastEditors: æ›¹ç¿
 * @LastEditTime: 2024/09/30
 */

// 6.2人员
// å¹´åº¦è®¡åˆ’列表
export const yearPlanListApi = '/superVisePlan/yearPlanList'

// å¹´åº¦è®¡åˆ’明细
export const yearDetailPlanListApi = '/superVisePlan/yearPlanDetailList'

// æ–°å¢žæ˜Žç»†
export const yearPlanDetailAdd = '/superVisePlan/yearPlanDetailAdd'

// ç¼–辑明细
export const yearPlanDetailEdit = '/superVisePlan/yearPlanDetailEdit'

// åˆ é™¤å¹´è®¡åˆ’
export const delYearPlanApi = '/superVisePlan/yearPlanDel'

// åˆ é™¤å¹´è®¡åˆ’明细
export const delYearPlanDetailApi = '/superVisePlan/yearPlanDetailDel'

// æ‰¹å‡†å¹´åº¦è®¡åˆ’
export const yearPlanDetailApprovalApi = '/superVisePlan/yearPlanDetailApproval'

// äººå‘˜ ç›‘督计划导出
export const exportSuperVisePlanApi = '/superVisePlan/exportSuperVisePlan'

// äººå‘˜ - å¥–惩记录 åˆ†é¡µæŸ¥è¯¢
export const rewardPunishmentPageApi = '/personRewardPunishmentRecord/rewardPunishmentPage'

// äººå‘˜ - å¥–惩记录 æ–°å¢ž/更新
export const addOrUpdateRewardPunishmentApi = '/personRewardPunishmentRecord/addOrUpdateRewardPunishment'

// äººå‘˜ - å¥–惩记录 åˆ é™¤
export const deleteRewardPunishmentApi = '/personRewardPunishmentRecord/deleteRewardPunishment'

/**
 * @desc ç›‘督记录
 */
// æŸ¥è¯¢
export const personSupervisionRecordPage = '/personSupervisionRecord/personSupervisionRecordPage'
// æ–°å¢ž-编辑 ç›‘督记录
export const addOrUpdatePersonSupervisionRecord = '/personSupervisionRecord/addOrUpdatePersonSupervisionRecord'
// åˆ é™¤ ç›‘督记录
export const deletePersonSupervisionRecord = '/personSupervisionRecord/deletePersonSupervisionRecord'
// æŸ¥è¯¢ æŽ§åˆ¶å•
export const personSupervisionControlSheetPage = '/personSupervisionRecord/personSupervisionControlSheetPage'
// æ–°å¢ž-编辑 æŽ§åˆ¶å•
export const addOrUpdatePersonSupervisionControl = '/personSupervisionRecord/addOrUpdatePersonSupervisionControl'
// æŸ¥è¯¢ å¤„理单
export const personSupervisionProcessingPage = '/personSupervisionRecord/personSupervisionProcessingPage'
// æ–°å¢ž-编辑 å¤„理单
export const addOrUpdatePersonnelServiceProcessing = '/personSupervisionRecord/addOrUpdatePersonnelServiceProcessing'
// æŽ§åˆ¶å•å¯¼å‡º
export const exportSupervisionControlSheet = '/personSupervisionRecord/exportSupervisionControlSheet'
// å¤„理单导出
export const exportSupervisionProcessingSheet = '/personSupervisionRecord/exportSupervisionProcessingSheet'
// ç›‘督记录导出
export const exportPersonSupervisionRecord = '/personSupervisionRecord/exportPersonSupervisionRecord'

/**
 * @desc æ²Ÿé€šè®°å½•
 */
// æŸ¥è¯¢æ²Ÿé€š
export const personPersonCommunicationAbilityPage = '/personCommunicationAbility/personPersonCommunicationAbilityPage'
// æ–°å¢ž-编辑
export const addOrUpdatePersonCommunicationAbility = '/personCommunicationAbility/addOrUpdatePersonCommunicationAbility'
// åˆ é™¤
export const deletePersonCommunicationAbility = '/personCommunicationAbility/deletePersonCommunicationAbility'

/**
 * @desc ä»»èŒæŽˆæƒè®°å½•
 */
// æŸ¥è¯¢è¡¨æ ¼
export const getPersonPostAuthorizationRecordPage = '/personPostAuthorizationRecord/PersonPostAuthorizationRecordPage'
// æ–°å¢ž
export const addOrUpdatePersonPostAuthorizationRecord = '/personPostAuthorizationRecord/addOrUpdatePersonPostAuthorizationRecord'
// ä¸Šä¼ æ–‡ä»¶
export const saveCNASFile = '/personBasicInfo/saveCNASFile'
// äººå‘˜åˆ—表
export const getUserListApi = '/deviceScope/selectUserList'
// åˆ é™¤
export const deletePersonPostAuthorizationRecord = '/personPostAuthorizationRecord/deletePersonPostAuthorizationRecord'

/**
 * @desc ç›‘督计划
 */
// å¯¼å…¥å¹´åº¦è®¡åˆ’
export const yearPlanDetailImport = '/superVisePlan/yearPlanDetailImport'

/**
 * @desc ä¾›åº”商管理
 */
// ä¾›åº”æ ‘
export const suppliersDirectoryContentsSuppliersDirectoryContentsListing = '/suppliersDirectoryContents/suppliersDirectoryContentsListing'
// æ–°å¢žèŠ‚点
export const suppliersDirectoryContentsAddSuppliersDirectoryContents = '/suppliersDirectoryContents/addSuppliersDirectoryContents'
// ç¼–辑节点
export const suppliersDirectoryContentsUpdateSuppliersDirectoryContents = '/suppliersDirectoryContents/updateSuppliersDirectoryContents'
// åˆ é™¤èŠ‚点
export const suppliersDirectoryContentsDeleteSuppliersDirectoryContentsById = '/suppliersDirectoryContents/deleteSuppliersDirectoryContentsById'
// æŸ¥è¯¢æ‰€æœ‰èŠ‚点
export const suppliersDirectoryContentsGetSuppliersDirectoryContentsNodeNames = '/suppliersDirectoryContents/getSuppliersDirectoryContentsNodeNames'
// åˆ†é¡µæŸ¥è¯¢åˆæ ¼ä¾›æ–¹å
export const selectQualifiedSupplierManagementPage = '/supplierManagement/selectQualifiedSupplierManagementPage'
// åˆ†é¡µæŸ¥è¯¢ä¾›æ–¹åå½•
export const selectSupplierManagementPage = '/supplierManagement/selectSupplierManagementByParentId'
// æ–°å¢žä¾›åº”商
export const addSupplierManagement = '/supplierManagement/addSupplierManagement'
// ç¼–辑供应商
export const updateSupplierManagement = '/supplierManagement/updateSupplierManagement'
// åˆ é™¤ä¾›åº”商
export const delSupplierManagement = '/supplierManagement/delSupplierManagement'

// å¯¼å‡ºä¾›åº”商
export const exportSupplierManagement = '/supplierManagement/exportSupplierManagement'

export const selectSupplierManagementAll = '/supplierManagement/selectSupplierManagementAll'
/**
 * @desc æœåŠ¡å’Œä¾›åº”品采购
 */
export const procurementSuppliesList = '/procurementSuppliesList/procurementSuppliesList'
export const addProcurementSuppliesList = '/procurementSuppliesList/addProcurementSuppliesList'
export const updateProcurementSuppliesList = '/procurementSuppliesList/updateProcurementSuppliesList'
export const deleteProcurementSuppliesList = '/procurementSuppliesList/deleteProcurementSuppliesList'

/**
 * @desc æ ‡å‡†ç‰©è´¨æ¸…单
 */
export const getStandardSubstanceAll = '/feStandardSubstance/getStandardSubstanceAll';

/**
 * @desc æ ‡å‡†ç‰©è´¨éªŒæ”¶
 */
// æŸ¥è¯¢
export const getPageAcceptance = '/feStandardSubstanceAcceptance/getPageAcceptance';
// æŸ¥è¯¦æƒ…
export const getAcceptanceDetails = '/feStandardSubstanceAcceptance/getAcceptanceDetails'
// æ–°å¢ž
export const addAcceptance = '/feStandardSubstanceAcceptance/addAcceptance';
// ç¼–辑
export const updateAcceptance = '/feStandardSubstanceAcceptance/updateAcceptance';
// å¯¼å‡º
export const exportAcceptance = '/feStandardSubstanceAcceptance/exportFeStandardSubstanceAcceptance';
/**
 * @desc æœåŠ¡å’Œä¾›åº”品耗材消耗
 */
export const procurementSuppliesExpendsList = '/procurementSuppliesExpends/procurementSuppliesExpendlist'
export const addProcurementSuppliesExpends = '/procurementSuppliesExpends/addProcurementSuppliesExpends'
export const deleteProcurementSuppliesExpends = '/procurementSuppliesExpends/deleteProcurementSuppliesExpends'
// è€—材列表excel
export const procurementSuppliesListExport = '/procurementSuppliesList/exportProcurementSuppliesList'
// è€—材入库导出excel
export const procurementSuppliesStoreExportExcel = 'procurementSuppliesStore/exportExcel'


 src/assets/api/controller.js

@@ -59,6 +59,7 @@
    processSample,
    processTotaldeal,
    processEvaluate,
    qualityMonitor,
  }
}

@@ -761,3 +762,26 @@
  delProcessEvaluate:'/processEvaluate/delProcessEvaluate',//删除  ä¼ å‚id
  exportProcessEvaluate:'/processEvaluate/exportProcessEvaluate',//导出
}

// 7.7质量监控计划
const qualityMonitor = {
  pageQualityMonitor:'/qualityMonitor/pageQualityMonitor', // ç›‘控年度计划列表
  pageQualityMonitorDetail:'/qualityMonitor/pageQualityMonitorDetail', // ç›‘控计划详情列表
  addQualityMonitorDetail:'/qualityMonitor/addQualityMonitorDetail', // æ–°å¢žç›‘控计划详情
  updateQualityMonitorDetail:'/qualityMonitor/updateQualityMonitorDetail', // ä¿®æ”¹ç›‘控计划详情
  delQualityMonitorDetail:'/qualityMonitor/delQualityMonitorDetail', // åˆ é™¤ç›‘控计划详情
  getQualityMonitorRatify:'/qualityMonitor/getQualityMonitorRatify', // æŸ¥è¯¢ç›‘控计划详情实施信息
  addQualityMonitorRatify:'/qualityMonitor/addQualityMonitorRatify', // æ–°å¢žç›‘控计划详情实施信息
  addQualityMonitorRatifyOpinion:'/qualityMonitor/addQualityMonitorRatifyOpinion', // æäº¤ç›‘控计划详情批准意见
  getQualityMonitorEvaluate:'/qualityMonitor/getQualityMonitorEvaluate', // æŸ¥è¯¢ç›‘控评价
  addQualityMonitorEvaluate:'/qualityMonitor/addQualityMonitorEvaluate', // æ–°å¢žç›‘控评价
  addMonitorEvaluateOpinion:'/qualityMonitor/addMonitorEvaluateOpinion', // æ–°å¢žç›‘控评价批准
  getEvaluateFileList:'/qualityMonitor/getEvaluateFileList', // æŸ¥è¯¢ç›‘控评价附件列表
  delVerifyEvaluateFileList:'/qualityMonitor/delVerifyEvaluateFileList', // åˆ é™¤ç›‘控评价附件列表
  uploadEvaluateFile:'/qualityMonitor/uploadEvaluateFile', // æ–°å¢žç›‘控评价附件表
  examineQualityMonitor:'/qualityMonitor/examineQualityMonitor', // ç›‘控计划审核
  ratifyQualityMonitor:'/qualityMonitor/ratifyQualityMonitor', // ç›‘控计划批准
  delQualitySupervise:'/qualityMonitor/delQualitySupervise', // ç›‘控计划批准
  importQualityMonitor:'/qualityMonitor/importQualityMonitor', // å¯¼å…¥ç›‘控计划
  exportQualityMonitorDetail:'/qualityMonitor/exportQualityMonitorDetail', // å¯¼å‡ºç›‘控计划
}

 src/components/caorui/Department/components/Communicate/Add.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,144 @@
<template>
    <div class="add">
        <el-dialog
            :title="isEdit ?'编辑附件资料':'新增附件资料'"
            :visible.sync="dialogVisible"
            width="40%"
        >
            <el-form
                :model="form"
                label-width="80px"
                size="small"
            >
                    <el-form-item label="沟通人">
                        <el-select
                            v-model="form.userId"
                            placeholder="请选择"
                            style="width: 100%" multiple
                        >
                            <el-option
                                v-for="(item, index) in userList"
                                :key="index"
                                :label="item.name"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="沟通时间">
                        <el-date-picker
                            v-model="form.communicationTime"
                            type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="请选择日期时间"
                            style="width: 100%"
                        >
                        </el-date-picker>
                    </el-form-item >
                    <el-form-item label="沟通地点">
                        <el-input v-model="form.communicationPlace" placeholder="请选择"></el-input>
                    </el-form-item >
                    <el-form-item label="沟通内容">
                        <el-input v-model="form.communicationContent" placeholder="请选择"></el-input>
                    </el-form-item >
            </el-form>
            <div slot="footer" class="foot">
                <el-button @click="dialogVisible = false">取 æ¶ˆ</el-button>
                <el-button type="primary" :loading="loading" @click="submitForm">ç¡® å®š</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {
    getUserListApi,
    addOrUpdatePersonCommunicationAbility,
} from "../../../../../assets/api/api"
export default {
    data() {
        return {
            isEdit: false,
            dialogVisible: false,
            form: {
                id: undefined,
                userId: [],
                communicationTime: undefined,
                communicationPlace: undefined,
                communicationContent: undefined
            },
            loading: false,
            userList: []
        }
    },
    methods: {
        /**
         * @desc æ˜¾ç¤ºæ¨¡æ€æ¡†
         * @param {*} row
         * @param {*} type
         */
        openDialog(row, type) {
            this.getUserList()
            this.dialogVisible = true
            if(type) {
                this.isEdit = true
                this.form.id = row.id
                this.form.userId = row.userId.split(',').map(m=>Number(m))
                this.form.communicationTime = row.communicationTime
                this.form.communicationPlace = row.communicationPlace
                this.form.communicationContent = row.communicationContent
            } else {
                this.isEdit = false
                this.form.id = undefined
                this.form.userId = []
                this.form.communicationTime = undefined
                this.form.communicationPlace = undefined
                this.form.communicationContent = undefined
            }
        },
        /**
         * @desc èŽ·å–用户信息
         */
        async getUserList() {
            const { code, data } = await this.$axios({
                method: 'get',
                url: getUserListApi,
            })
            if(code == 200) {
                this.userList = data
            }
        },
        /**
         * @desc æäº¤è¡¨å•
         */
        async submitForm() {
            this.loading = true
            const { code, data } = await this.$axios({
                method: 'post',
                url: addOrUpdatePersonCommunicationAbility,
                data: {
                    id: this.form.id,
                    userId: this.form.userId.join(','),
                    communicationTime: this.form.communicationTime,
                    communicationPlace: this.form.communicationPlace,
                    communicationContent: this.form.communicationContent,
                },
                noQs: true
            })
            if(code == 200) {
                this.$emit('submit')
                this.dialogVisible = false
            } else {
                this.$message.error(this.isEdit ? '编辑失败':'新增失败')
            }
            this.loading = false
        }
    }
}
</script>
<style scoped>
.foot {
    width: 100%;
}
.add >>> .el-dialog__footer {
    padding-right: 20px;
}
</style>

 src/components/caorui/Department/components/Communicate/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,238 @@
<template>
    <div class="flex_column">
        <TableCard title="沟通记录" :showForm="isDepartment">
            <template v-slot:form >
                <div class="w100 items_center justify_between" v-if="isDepartment">
                    <div></div>
                    <div>
                        <!-- <el-button type="primary" size="small">导出</el-button> -->
                        <el-button type="primary" size="small" @click="openDialog">新增</el-button>
                    </div>
                </div>
            </template>
            <template v-slot:table>
                <ZTTable
                    style="margin-top: 18px; padding: 0 15px;"
                    :height="'calc(100vh - 21em)'"
                    :column="columnData"
                    :table-data="tableData"
                    :table-loading="loading"
                ></ZTTable>
                <el-divider></el-divider>
                <div class="pagination">
                    <div></div>
                    <el-pagination
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="pagination.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pagination.total"
                        @current-change=""
                        @size-change=""
                    >
                    </el-pagination>
                </div>
            </template>
        </TableCard>
        <Add ref="communicateModal" @submit="getTableData"></Add>
    </div>
</template>
<script>
import TableCard from "../../../TableCard/index.vue"
import ZTTable from "../../../ZTTable/index.vue"
import Add from "./Add.vue"
import {
    personPersonCommunicationAbilityPage,
    deletePersonCommunicationAbility,
    exportPersonCommunicationAbility
} from "../../../../../assets/api/api.js"

export default {
    components: {
        TableCard,
        ZTTable,
        Add
    },
  props: {
    departId: {
      type: Number,
      default: () => {
        return null;
      }
    },
    isDepartment: {
      type: Boolean,
      default: false
    }
  },
    data() {
        return {
            // departId: 0,
            columnData: [
                {
                    label: '序号',
                    prop: 'id'
                }, {
                    label: '沟通人',
                    prop: 'userName'
                }, {
                    label: '沟通时间',
                    prop: 'communicationTime'
                }, {
                    label: '沟通地点',
                    prop: 'communicationPlace'
                }, {
                    label: '沟通内容',
                    prop: 'communicationContent'
                }, {
                    label: '操作',
                    dataType: 'action',
                    operation: [
                        {
                            name: '编辑',
                            type: 'text',
                            clickFun: (row) => {
                                this.openDialog(row, true)
                            }
                        }, {
                            name: '下载',
                            type: 'text',
                            clickFun: (row) => {
                                this.handleDown(row)
                            }
                        }, {
                            name: '删除',
                            type: 'text',
                            color: '#f56c6c',
                            clickFun: (row) => {
                                this.delPerson(row.id)
                            }
                        }
                    ]
                },
            ],
            tableData: [],
            pagination: {
                current: 1,
                pageSize: 20,
                total: 0
            },
            loading: false
        }
    },
  mounted() {
    this.getTableData()
  },
  methods: {
        openDialog(row, type=false) {
            this.$refs.communicateModal.openDialog(row, type)
        },
        async getTableData() {
            this.loading = true
          const params = this.isDepartment ? {
            departLimsId: this.departId,
            current: this.pagination.current,
            size: this.pagination.pageSize
          } : {
            userId: this.departId,
            current: this.pagination.current,
            size: this.pagination.pageSize
          }
            const { code, data } = await this.$axios({
                method: 'get',
                url: personPersonCommunicationAbilityPage,
                params: params
            })
            if(code == 200) {
                this.pagination.total = data.total
                this.tableData = data.records
                this.loading = false
            }
        },
        /**
         * @desc èŽ·å–设备id
         */
        getDepart(id) {
            this.departId = id
            this.getTableData()
        },
        /**
         * @desc åˆ é™¤æ²Ÿé€šè®°å½•
         */
        delPerson(id) {
            this.$confirm('此操作将永久删除该文件, æ˜¯å¦ç»§ç»­?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let formData = new FormData()
                formData.append('id', id)
                const { code } = await this.$axios({
                    method: 'delete',
                    url: deletePersonCommunicationAbility,
                    data: formData
                })
                if(code == 200) {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getTableData()
                }
            })
        },
        async handleDown(row){
          this.$axios.post(this.$api.personCommunicationAbility.exportPersonCommunicationAbility,{id:row.id},{responseType: "blob"}).then(res => {
            if(res.code == 201){
              this.$message.error(res.message)
              return
            }
            this.$message.success('下载成功')
            const blob = new Blob([res],{ type: 'application/octet-stream' });
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = row.userName+'-沟通记录'+'.docx';
            link.click();
          })
        }
    },
  watch: {
    departId: {
      handler(newId, oldId) {
        if (newId) {
          this.getTableData();
        }
      }
    }
  }
}
</script>
<style scoped>
.flex_column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.w100 {
    width: 100%;
}
.pagination {
    display: flex;
    justify-content: space-between
}
.items_center {
    display: flex;
    align-items: center;
}
.justify_between {
    justify-content: space-between
}
.date_box {
    margin: 0 5px;
}

.search {
    width: 150px;
    padding: 0 16px;
}
</style>

 src/components/caorui/Department/components/Mandate/Add.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,256 @@
<template>
    <div class="add">
        <el-dialog
            :title="isEdit ?'编辑附件资料':'新增附件资料'"
            :visible.sync="dialogVisible"
            width="50%"
        >
            <el-form
                ref="ruleForm"
                :rules="rules"
                :model="form"
                label-width="100px"
                size="medium"
            >
                    <el-form-item label="证书编号" prop="certificateNumber">
                        <el-input v-model="form.certificateNumber" placeholder="请输入" style="width: 100%">
                        </el-input>
                    </el-form-item >
                    <el-form-item label="被任职人员" prop="userId">
                        <el-select v-model="form.userId" placeholder="请选择">
                            <el-option
                                v-for="(item, index) in userList"
                                :key="index"
                                :label="item.name"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item >
                    <el-form-item label="任职岗位" prop="post">
                        <el-input v-model="form.post" placeholder="请输入"></el-input>
                    </el-form-item >
                    <el-form-item label="理论考试成绩" prop="num1">
                        <el-input v-model="form.num1" placeholder="请输入"></el-input>
                    </el-form-item >
                    <el-form-item label="操作技能考试成绩" prop="num2">
                        <el-input v-model="form.num2" placeholder="请输入"></el-input>
                    </el-form-item >
                    <el-form-item label="操作类型" prop="operationType">
                        <el-input v-model="form.operationType" placeholder="请选择"></el-input>
                    </el-form-item >
                    <el-row>
                      <el-col :span="20">
                        <el-form-item label="上岗证书">
                          <el-input v-model="form.systemFileName" size="small" disabled>
                            <el-button slot="append" icon="el-icon-delete-solid"
                                       @click="deleteFile(form.systemFileName)"></el-button>
                          </el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="4">
                        <el-upload ref="upload" style="float: left; margin: 0 12px 0 20px;" :action="action"
                                   :show-file-list="false"
                                   :on-success="onSuccess">
                          <el-button class="uploadFile" slot="trigger" size="small" type="primary">浏览</el-button>
                        </el-upload>
                      </el-col>
                    </el-row>
<!--                    <el-form-item label="文件">-->
<!--                        <el-upload-->
<!--                            ref="upload"-->
<!--                            action="#"-->
<!--                            :before-upload="beforeUpload"-->
<!--                            :http-request="uploadFile"-->
<!--                            :file-list="form.fileList"-->
<!--                            :limit="1"-->
<!--                            :auto-upload="false"-->
<!--                        >-->
<!--                            <el-button type="primary" plain>-->
<!--                                <i class="el-icon-upload el-icon&#45;&#45;right"></i>-->
<!--                                ä¸Šä¼ æ–‡ä»¶-->
<!--                            </el-button>-->
<!--                        </el-upload>-->
<!--                    </el-form-item>-->
                    <el-form-item label="备注">
                        <el-input v-model="form.remarks" placeholder="请选择"></el-input>
                    </el-form-item >
            </el-form>
            <div slot="footer" class="foot">
                <el-button @click="dialogVisible = false">取 æ¶ˆ</el-button>
                <el-button type="primary" :loading="loading" @click="submitForm">ç¡® å®š</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {
    addOrUpdatePersonPostAuthorizationRecord,
    saveCNASFile,
    getUserListApi
} from "../../../../../assets/api/api"
export default {
    data() {
        return {
            isEdit: false,
            dialogVisible: false,
            form: {
                id: undefined,
                certificateNumber: undefined,
                userId: undefined,
                post: undefined,
                operationType: undefined,
                fileList: [],
                fileName: undefined,
                systemFileName: undefined,
                remarks: undefined,
                num2:undefined,
                num1:undefined
            },
            rules: {
                certificateNumber: [{ required: true, message: '请输入证书编号', trigger: 'blur' }],
                userId: [{ required: true, message: '请选择被任职人员', trigger: 'change' }],
                post: [{ required: true, message: '任职岗位', trigger: 'blur' }],
                operationType: [{ required: true, message: '操作类型', trigger: 'blur' }],

            },
            loading: false,
            userList: []
        }
    },
    mounted() {

    },
  computed: {
    action() {
      return this.javaApi + this.$api.personnel.saveCNASFile
    }
  },
    methods: {
      async onSuccess(response, file, fileList) {
        this.$set(this.form, "systemFileName", response.data)
      },
      async deleteFile(fileName) {
        await this.$axios.delete(this.$api.personnel.deleteCNASFile + "?fileName=" + fileName).then(res => {
          this.$message.success('删除成功！')
          this.$set(this.form, "systemFileName", null)
        })
      },
        async openDialog(row, type) {
            await this.getUserList()
            this.dialogVisible = true
            if(type) {
                this.isEdit = true
                this.form.id = row.id
                this.form.certificateNumber = row.certificateNumber
                this.form.userId = Number(row.userId)
                this.form.post = row.post
                this.form.operationType = row.operationType
                this.form.systemFileName = row.systemFileName
                this.form.remarks = row.remarks
                this.form.num1 = row.num1
                this.form.num2 = row.num2
            } else {
                this.isEdit = false
                this.form.id = undefined
                this.form.certificateNumber = undefined
                this.form.userId = undefined
                this.form.post = undefined
                this.form.operationType = undefined
                this.form.fileList = []
                this.form.fileName = undefined
                this.form.systemFileName = undefined
                this.form.remarks = undefined
                this.form.num1 = undefined
                this.form.num2 = undefined
            }
        },
        closeDialog() {
            this.dialogVisible = false
        },
        /**
         * @desc èŽ·å–用户信息
         */
        async getUserList() {
            const { code, data } = await this.$axios({
                method: 'get',
                url: getUserListApi,
            })
            if(code == 200) {
                this.userList = data
            }
        },
        /**
         * @desc æäº¤è¡¨å•
         */
        submitForm() {
            this.$refs.ruleForm.validate(async (valid) => {
                if(valid) {
                    await this.submitFormData()
                }
            })
        },
        /**
         * @desc ä¸Šä¼ æ–‡ä»¶
         */
        async uploadFile() {
            console.log('文件', this.form.fileList[0])
            let formData = new FormData()
            formData.append('file', this.form.fileList[0])
            const { code, data } = await this.$axios({
                method: 'post',
                url: saveCNASFile,
                data: formData,
                headers: {
                    'Content-Type': 'multipart/form-data;'
                },
                noQs: true
            })
            if(code == 200) {
                this.form.systemFileName = data
            }
        },
        /**
         * @desc ä¸Šä¼ æ–‡ä»¶
         */
        beforeUpload(file) {
            this.form.fileList = [file]
            this.form.fileName = file.name
        },
        /**
         * @desc æäº¤form表单
         */
        async submitFormData() {
            this.loading = true
            const { code, data } = await this.$axios({
                method: 'post',
                url: addOrUpdatePersonPostAuthorizationRecord,
                data: {
                    id: this.form.id,
                    certificateNumber: this.form.certificateNumber,
                    userId: this.form.userId,
                    post: this.form.post,
                    operationType: this.form.operationType,
                    systemFileName: this.form.systemFileName,
                    remarks: this.form.remarks,
                    num1: this.form.num1,
                    num2: this.form.num2
                },
                noQs: true
            })
            if(code == 200) {
                this.closeDialog()
                this.$emit('refresh')
            }
            this.loading = false
        }
    }
}
</script>
<style scoped>
.foot {
    width: 100%;
}
.add >>> .el-dialog__footer {
    padding-right: 20px;
}
</style>

 src/components/caorui/Department/components/Mandate/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,265 @@
<template>
    <div class="flex_column">
        <TableCard title="任职授权记录" :showForm="isDepartment">
            <template v-slot:form>
                <div class="w100 items_center justify_between" v-if="isDepartment">
                    <div></div>
                    <div>
                        <el-button type="primary" size="small" @click="openDialog">新增</el-button>
                    </div>
                </div>
            </template>
            <template v-slot:table>
                <ZTTable
                    style="margin-top: 18px; padding: 0 15px;"
                    :height="'calc(100vh - 21em)'"
                    :column="columnData"
                    :table-data="tableData"
                    :table-loading="loading"
                ></ZTTable>
                <el-divider></el-divider>
                <div class="pagination">
                    <div></div>
                    <el-pagination
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="pagination.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pagination.total"
                        @current-change="currentChange"
                        @size-change="sizeChange"
                    >
                    </el-pagination>
                </div>
            </template>
        </TableCard>
        <Add ref="mandateModal" @refresh="getTableData"></Add>
    </div>
</template>
<script>
import TableCard from "../../../TableCard/index.vue"
import ZTTable from "../../../ZTTable/index.vue"
import Add from "./Add.vue"
import {
    getPersonPostAuthorizationRecordPage,
    deletePersonPostAuthorizationRecord
} from "../../../../../assets/api/api"
import { nextTick } from "vue";

export default {
    components: {
        TableCard,
        ZTTable,
        Add
    },
  props: {
    departId: {
      type: Number,
      default: () => {
        return null;
      }
    },
    isDepartment: {
      type: Boolean,
      default: false
    }
  },
    data() {
        return {
            // departId: 0,
            columnData: [
                {
                    label: '序号',
                    prop: 'id'
                }, {
                    label: '证书编号',
                    prop: 'certificateNumber'
                }, {
                    label: '被任职人员',
                    prop: 'userName'
                }, {
                    label: '任职岗位',
                    prop: 'post'
                }, {
                    label: '理论考试成绩',
                    prop: 'num1'
                },{
                    label: '操作技能考试成绩',
                    prop: 'num2'
                },{
                    label: '操作时间',
                    prop: 'updateTime'
                }, {
                    label: '备注',
                    prop: 'remarks',
                    width: 300
                }, {
                    label: '操作',
                    dataType: 'action',
                    width: 160,
                    operation: [
                        {
                            name: '编辑',
                            type: 'text',
                            clickFun: (row) => {
                                this.openDialog(row, true)
                            }
                        }, {
                            name: '下载',
                            type: 'text',
                            clickFun: (row) => {
                                this.handleDown(row)
                            }
                        }, {
                            name: '删除',
                            type: 'text',
                            color: '#f56c6c',
                            clickFun: (row) => {
                                this.deleteNotify(row.id)
                            }
                        }
                    ]
                },
            ],
            tableData: [],
            pagination: {
                current: 1,
                pageSize: 20,
                total: 0
            },
            loading: false
        }
    },
    mounted() {
      this.getTableData()
        console.log(this.departId)
    },
    methods: {
        openDialog(row, type=false) {
            this.$refs.mandateModal.openDialog(row, type)
        },
        /**
         * @desc æŸ¥è¯¢è¡¨æ ¼æ•°æ®
         */
        async getTableData() {
            this.loading = true
            await nextTick()
          const params = this.isDepartment ? {
            departLimsId: this.departId,
            current: this.pagination.current,
            size: this.pagination.pageSize
          } : {
            userId: this.departId,
            current: this.pagination.current,
            size: this.pagination.pageSize
          }
            const { code, data } = await this.$axios({
                method: 'get',
                url: getPersonPostAuthorizationRecordPage,
                params: params
            })
            if(code == 200) {
                this.pagination.total = data.total
                this.tableData = data.records
                this.loading = false
            }
        },
        /**
         * @desc å½“前页改变
         */
        currentChange(current) {
            this.pagination.current = current
            this.getTableData()
        },
        /**
         * @desc æ¯é¡µä¸ªæ•°æ”¹å˜
         */
        sizeChange(pageSize) {
            this.pagination.pageSize = pageSize
            this.getTableData()
        },
        /**
         * @desc åˆ é™¤ä»»èŒè®°å½•
         */
        deleteNotify(id) {
            this.$confirm('此操作将永久删除该文件, æ˜¯å¦ç»§ç»­?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.delMandate(id)
            })
        },
        /**
         * @desc api删除
         */
        async delMandate(id) {
            const formData = new FormData()
            formData.append('id', id)
            const { code, data } = await this.$axios({
                method: 'delete',
                url: deletePersonPostAuthorizationRecord,
                data: formData,
                noQs: true
            })
            if(code == 200) {
                this.$message({ message: '删除成功', type: 'success' })
                this.getTableData()
            } else {
                this.$message({ message: '删除失败', type: 'error' })
            }
        },
        /**
         * @desc èŽ·å–设备id
         */
        getDepart(id) {
            this.departId = id
            this.getTableData()
        },
        handleDown(row){
          this.$axios.post(this.$api.personPostAuthorizationRecord.exportPersonPostAuthorizationRecord,{id:row.id},{responseType: "blob"}).then(res => {
            if(res.code == 201){
              this.$message.error(res.message)
              return
            }
            this.$message.success('下载成功')
            const blob = new Blob([res],{ type: 'application/octet-stream' });
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = '任职授权-'+row.certificateNumber+'-'+row.post + '.docx';
            link.click();
          })
        }
    },
//   watch: {
//     departId: {
//       handler(newId, oldId) {
//         if (newId) {
//           this.getTableData();
//         }
//       }
//     }
//   }
}
</script>
<style scoped>
.flex_column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.w100 {
    width: 100%;
}
.pagination {
    display: flex;
    justify-content: space-between
}
.items_center {
    display: flex;
    align-items: center;
}
.justify_between {
    justify-content: space-between
}
</style>

 src/components/caorui/Department/components/Plan/Add.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,192 @@
<template>
    <div class="add">
        <el-dialog
            :title="isEdit ? '编辑监督计划明细':'新增监督计划明细'"
            :visible.sync="dialogVisible"
            width="800px"
        >
            <el-form ref="formRef" :model="ruleForm" :rules="rules" label-width="100px">
                <el-col :span="12">
                    <el-form-item label="监督日期" prop="superviseDate">
                        <el-date-picker
                            v-model="ruleForm.superviseDate"
                            format="yyyy-MM-dd"
                            placeholder="选择日期"
                            style="width: 100%;"
                            type="date"
                            value-format="yyyy-MM-dd"
                        ></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="监督目的" prop="superviseDes">
                        <el-input v-model="ruleForm.superviseDes"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="监督项目" prop="superviseProject">
                        <el-input v-model="ruleForm.superviseProject"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="被监督人" prop="supervisePerson">
                        <el-input v-model="ruleForm.supervisePerson"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="监督原因" prop="superviseReason">
                        <el-input v-model="ruleForm.superviseReason"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="备注" prop="remarks">
                        <el-input v-model="ruleForm.remarks"></el-input>
                    </el-form-item>
                </el-col>
            </el-form>
            <div slot="footer" class="foot">
                <el-button @click="dialogVisible = false">取 æ¶ˆ</el-button>
                <el-button :loading="loading" type="primary" @click="submitForm">ç¡® å®š</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { yearPlanDetailAdd, yearPlanDetailEdit } from '../../../../../assets/api/api'
export default {
    props: {
        planId: {
            type: Number,
            default: undefined
        }
    },
    data() {
        return {
            loading: false,
            isEdit: false,
            dialogVisible: false,
            ruleForm: {
                id: undefined,
                superviseDate: undefined, // ç›‘督日期
                superviseDes: undefined, // ç›‘督目的
                superviseProject: undefined, // ç›‘督项目
                supervisePerson: undefined, // è¢«ç›‘督人
                superviseReason: undefined, // ç›‘督原因
                remarks: undefined, // å¤‡æ³¨
            },
            rules: {
                superviseDate: [{ required: true, message: '请选择日期', trigger: 'change' }],
                superviseDes: [{ required: true, message: '请输入监督目的', trigger: 'blur' }],
                superviseProject: [{ required: true, message: '请输入监督项目', trigger: 'blur' }],
                supervisePerson: [{ required: true, message: '请输入被监督人', trigger: 'blur' }],
                superviseReason: [{ required: true, message: '请输入监督原因', trigger: 'blur' }],
            }
        }
    },
    methods: {
        formatForm(row) {
            this.ruleForm.id = undefined
            this.ruleForm.planId = row.planId
            this.ruleForm.superviseDate = undefined
            this.ruleForm.superviseDes = undefined
            this.ruleForm.superviseProject = undefined
            this.ruleForm.supervisePerson = undefined
            this.ruleForm.superviseReason = undefined
            this.ruleForm.remarks = undefined
        },
        renderForm(row) {
            this.ruleForm.id = row.id
            this.ruleForm.superviseDate = row.superviseDate
            this.ruleForm.superviseDes = row.superviseDes
            this.ruleForm.superviseProject = row.superviseProject
            this.ruleForm.supervisePerson = row.supervisePerson
            this.ruleForm.superviseReason = row.superviseReason
            this.ruleForm.remarks = row.remarks
        },
        showDialog(row, type) {
            console.log(row)
            if(type) {
                this.isEdit = true
                this.renderForm(row)
            } else {
                this.formatForm(row)
                this.isEdit = false
            }
            this.dialogVisible = true
        },
        closeDialog() {
            this.dialogVisible = false
        },
        async addYearDetail() {
            const { code, data } = await this.$axios({
                method: 'post',
                url: yearPlanDetailAdd,
                data: this.ruleForm,
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            this.loading = false
            if(code == 200) {
                this.$message({
                    type: 'success',
                    message: '新增成功'
                })
                this.closeDialog()
                this.$emit('submit')
            } else {
                this.$message({
                    type: 'error',
                    message: '新增失败'
                })
            }
        },
        async editYearDetail() {
            const { code, data } = await this.$axios({
                method: 'post',
                url: yearPlanDetailEdit,
                data: this.ruleForm,
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            this.loading = false
            if(code == 200) {
                this.$message({
                    type: 'success',
                    message: '编辑成功'
                })
                this.closeDialog()
                this.$emit('submit')
            } else {
                this.$message({
                    type: 'error',
                    message: '编辑失败'
                })
            }
        },
        submitForm() {
            this.$refs.formRef.validate((valid) => {
                if (valid) {
                    this.loading = true
                    if(this.isEdit) {
                        this.editYearDetail()
                    } else {
                        this.addYearDetail()
                    }
                } else {
                    return false;
                }
            })
        },
    }
}
</script>
<style scoped>
.foot {
    width: 100%;
}
.add >>> .el-dialog__footer {
    padding-right: 20px;
}
</style>

 src/components/caorui/Department/components/Plan/UploadExcel.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,58 @@
<template>
    <div>
        <el-upload
            ref="upload"
            action="#"
            :before-upload="beforeUpload"
            :http-request="uploadFile"
            :file-list="fileList"
            :on-success="uploadFileSuccess"
            accept=".xls, .xlsx"
            :limit="1"
            :auto-upload="true"
        >
            <el-button size="small" type="primary">导入</el-button>
        </el-upload>
    </div>
</template>
<script>
import { yearPlanDetailImport } from '../../../../../assets/api/api';
export default {
    data() {
        return {
            fileList: []
        }
    },
    methods: {
        /**
         * @desc ä¸Šä¼ æ–‡ä»¶
         */
        beforeUpload(file) {
            this.fileList = [file]
        },
        /**
         * @desc ä¸Šä¼ è‡³æœåŠ¡å™¨
         */
        async uploadFile() {
            console.log('文件', this.fileList[0])
            let formData = new FormData()
            formData.append('file', this.fileList[0])
            const { code, data } = await this.$axios({
                method: 'post',
                url: yearPlanDetailImport,
                data: formData,
                headers: {
                    'Content-Type': 'multipart/form-data;'
                },
                noQs: true
            })
            if(code == 200) {
                this.$emit('upload')
            }
        },
        uploadFileSuccess() {
            this.$refs.upload.clearFiles()
        }
    }
}
</script>

 src/components/caorui/Department/components/Plan/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,469 @@
<template>
    <div class="flex_column">
        <div>
            <TableCard title="年度计划表">
                <template v-slot:form>
                    <div class="items_center">
                        <span>编制人</span>
                        <el-input v-model="yearForm.organizationPerson" class="search" placeholder="请输入"
                            size="small"></el-input>
                        <el-button size="small" type="primary" @click="getYearPlanList">查询</el-button>
                        <el-button size="small" @click="clearYear">清空</el-button>
                    </div>
                    <UploadExcel @upload="getYearPlanList"></UploadExcel>
                </template>
                <template v-slot:table>
                    <ZTTable
                        ref="yearTable"
                        :column="yearColumnData"
                        :height="'calc(100vh - 38em)'"
                        :highlightCurrentRow="true"
                        :rowClick="rowClick"
                        :table-data="yearTableData"
                        :table-loading="yearLoading"
                        style="margin-top: 0.5em;
                        padding: 0 15px;"
                    >
                    </ZTTable>
                    <el-divider></el-divider>
                    <!-- åˆ†é¡µ -->
                    <div class="pagination">
                        <div></div>
                        <el-pagination :page-size="yearPage.pageSize" :page-sizes="[10, 20, 30, 40]"
                            :total="yearPage.total" layout="total, sizes, prev, pager, next, jumper"
                            @current-change="handleYearCurrent" @size-change="handleYearSizeChange">
                        </el-pagination>
                    </div>
                </template>
            </TableCard>
        </div>
        <div style="width: 100%; height: 0.5em; background-color: #f5f7fb;"></div>
        <div>
            <TableCard title="年度计划明细表">
                <template v-slot:form>
                    <div class="items_center">
                        <span>监督日期</span>
                        <el-date-picker v-model="yearDetailForm.date" class="date_box" format="yyyy-MM-dd" placeholder="选择日期"
                            size="small" type="date" value-format="yyyy-MM-dd">
                        </el-date-picker>
                        <span>监督项目</span>
                        <el-input v-model="yearDetailForm.project" class="search" placeholder="请输入" size="small"></el-input>
                        <el-button size="small" type="primary" @click="getYearDetailPlanList">查询</el-button>
                        <el-button size="small" @click="clearDetail">清空</el-button>
                    </div>
                    <div>
                        <el-button v-if="isOperation" size="small" type="primary" @click="showDialog('add')">新增</el-button>
                    </div>
                </template>
                <template v-slot:table>
                    <ZTTable :column="yearDetailColumnData" :height="'calc(100vh - 38em)'" :table-data="yearDetailTableData"
                        :table-loading="yearDetailLoading" style="margin-top: 18px; padding: 0 15px;">
                    </ZTTable>
                    <el-divider></el-divider>
                    <!-- åˆ†é¡µ -->
                    <div class="pagination">
                        <div></div>
                        <el-pagination :page-size="yearDeatilPage.pageSize" :page-sizes="[10, 20, 30, 40]"
                            :total="yearDeatilPage.total" layout="total, sizes, prev, pager, next, jumper"
                            @current-change="handleYearDetailCurrent" @size-change="handleYearDetailSizeChange">
                        </el-pagination>
                    </div>
                </template>
            </TableCard>
        </div>
        <PlanAdd ref="planModal" :planId="planId"  @submit="handleForm"></PlanAdd>
    </div>
</template>
<script>
import TableCard from "../../../TableCard/index.vue"
import PlanAdd from "./Add.vue"
import ZTTable from '../../../ZTTable/index.vue'
import UploadExcel from "./UploadExcel.vue"
import { yearPlanListApi, yearDetailPlanListApi, delYearPlanApi, delYearPlanDetailApi, yearPlanDetailApprovalApi, exportSuperVisePlanApi} from "../../../../../assets/api/api"

export default {
    components: {
        TableCard,
        PlanAdd,
        ZTTable,
        UploadExcel
    },
    data() {
        return {
            planId: undefined,
            yearForm: {
                organizationPerson: undefined,
            },
            yearTableData: [],  // å¹´è¡¨
            yearPage: {
                curent: 1,
                pageSize: 20,
                total: 0
            },
            yearColumnData: [
                {
                    label: '文件名称',
                    prop: 'fileName',
                    minWidth: '150px'
                }, {
                    label: '编制人',
                    prop: 'organizationPerson',
                    minWidth: '100'
                }, {
                    label: '编制日期',
                    prop: 'organizationDate',
                    minWidth: '160'
                }, {
                    label: '批准人',
                    prop: 'approvalName',
                    minWidth: '100'
                }, {
                    label: '批准日期',
                    prop: 'approvalDate',
                    minWidth: '160'
                }, {
                    label: '审核人',
                    prop: 'examine'
                }, {
                    dataType: 'tag',
                    label: '批准状态',
                    prop: 'approvalStatus',
                    minWidth: '130',
                    formatData: (params) => {
                        if (params == 1) {
                            return '批准'
                        } else {
                            return '不批准'
                        }
                    },
                    formatType: (params) => {
                        if (params == 1) {
                            return 'success'
                        } else {
                            return 'danger'
                        }
                    }
                }, {
                    label: '创建日期',
                    prop: 'createTime',
                    minWidth: '160'
                }, {
                    label: '创建人',
                    prop: 'createName',
                    minWidth: '100'
                }, {
                    dataType: 'action',
                    minWidth: '160',
                    label: '操作',
                  fixed: 'right',
                    operation: [
                      {
                        name: '导出',
                        type: 'text',
                        clickFun: (row) => {
                          this.downLoadPost(row)
                        }
                      },
                      {
                        name: '批准',
                        type: 'text',
                        disabled: (row) => {
                          if (row.approvalStatus == 1) {
                            return true
                          } else {
                            return false
                          }
                        },
                        clickFun: (row) => {
                          this.approvalYearPlan(row)
                        }
                      },
                      {
                        name: '删除',
                        type: 'text',
                        color: '#f56c6c',
                        clickFun: (row) => {
                          this.delYearPlan(row.id)
                        }
                      }
                    ]
                }],
            yearLoading: false,
            yearDetailForm: {
                date: undefined,
                project: undefined
            },
            yearDetailTableData: [],    // å¹´æ˜Žç»†è¡¨
            yearDeatilPage: {
                curent: 1,
                pageSize: 20,
                total: 0
            },
            yearDetailColumnData: [
                {
                    label: '监督日期',
                    prop: 'superviseDate'
                }, {
                    label: '监督目的',
                    prop: 'superviseDes'
                }, {
                    label: '被监督人员',
                    prop: 'supervisePerson'
                }, {
                    label: '备注',
                    prop: 'remarks'
                }, {
                    label: '培训日期',
                    prop: 'trainDate'
                }, {
                    label: '创建',
                    prop: 'createBy'
                }, {
                    dataType: 'action',
                    width: '180',
                    label: '操作',
                    operation: [
                        {
                            name: '编辑',
                            type: 'text',
                            clickFun: (row) => {
                                this.$refs.planModal.showDialog(row, true)
                            }
                        },
                        {
                            name: '删除',
                            type: 'text',
                            color: '#f56c6c',
                            clickFun: (row) => {
                                this.delYearPlanDetail(row.id)
                            }
                        }
                    ]
                }
            ],
            yearDetailLoading: false,
          isOperation: false,
        }
    },
    mounted() {
        this.getYearPlanList()
        // this.getYearDetailPlanList()
    },
    methods: {
        /**
         * @desc æŸ¥è¯¢å¹´åº¦è®¡åˆ’列表
         */
        async getYearPlanList() {
            this.yearLoading = true
            const { code, data } = await this.$axios({
                method: 'get',
                url: yearPlanListApi,
                params: {
                    current: this.yearPage.curent,
                    size: this.yearPage.pageSize,
                    organizationPerson: this.yearForm.organizationPerson
                }
            })
            if (code == 200) {
                this.yearTableData = data.records
                this.yearPage.total = data.total
              if (this.yearTableData.length > 0) {
                this.rowClick(this.yearTableData[0])
              }
            }
            this.yearLoading = false
        },
        // å¹´è®¡åˆ’分页
        handleYearCurrent(page) {
            this.yearPage.curent = page
            this.getYearPlanList()
        },
        handleYearSizeChange(size) {
            this.yearPage.pageSize = size
            this.getYearPlanList()
        },
        // å¹´åº¦è®¡åˆ’表格，点击行数据后刷新详情
        rowClick(row) {
          const now = new Date();
          const currentYear = now.getFullYear();
          if (row.createTime.slice(0,4) == currentYear) {
            this.isOperation = true;
          } else {
            this.isOperation = false;
          }
            this.planId = row.id
            this.getYearDetailPlanList()
        },
        // æ–°å¢ž|编辑完成后做什么
        handleForm() {
            this.getYearDetailPlanList()
        },
        // æ¸…除年
        clearYear() {
            this.$refs.yearTable.setCurrent()
            this.yearForm.organizationPerson = undefined
            this.getYearPlanList()
        },
        // æ¸…除明细
        clearDetail() {
            this.yearDetailForm.date = undefined
            this.yearDetailForm.project = undefined
            this.getYearDetailPlanList()
        },

        /**
         * @desc æŸ¥è¯¢å¹´åº¦è®¡åˆ’明细
         */
        async getYearDetailPlanList() {
            this.yearDetailLoading = true
            const { code, data } = await this.$axios({
                method: 'get',
                url: yearDetailPlanListApi,
                params: {
                    planId: this.planId,
                    current: this.yearDeatilPage.curent,
                    size: this.yearDeatilPage.pageSize,
                    date: this.yearDetailForm.date,
                    project: this.yearDetailForm.project
                }
            })
            if (code == 200) {
                this.yearDetailTableData = data.records
                this.yearDeatilPage.total = data.total
            }
            this.yearDetailLoading = false
        },
        showDialog(operationType,row, type = false) {
          if (operationType === 'add') {
            if (!this.planId) {
              this.$message.warning('请选择一条计划进行新增')
              return
            }
          }
          this.$refs.planModal.showDialog({planId:this.planId,...row}, type)
        },



        // å¹´æ˜Žç»†è®¡åˆ’分页
        handleYearDetailCurrent(page) {
            this.yearDeatilPage.curent = page
            this.getYearDetailPlanList()
        },
        handleYearDetailSizeChange(size) {
            this.yearDeatilPage.pageSize = size
            this.getYearDetailPlanList()
        },
        // åˆ é™¤å¹´è®¡åˆ’
        delYearPlan(id) {
            this.$confirm('此操作将永久删除该文件, æ˜¯å¦ç»§ç»­?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const { code } = await this.$axios({
                    method: 'delete',
                    url: delYearPlanApi,
                    params: { id }
                })
                if (code == 200) {
                    this.$message.success('删除成功')
                    this.getYearPlanList()
                    this.getYearDetailPlanList()
                } else {
                    this.$message.error('删除失败')
                }
            })
        },
        // åˆ é™¤å¹´è®¡åˆ’明细
        delYearPlanDetail(id) {
            this.$confirm('此操作将永久删除该文件, æ˜¯å¦ç»§ç»­?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const { code } = await this.$axios({
                    method: 'delete',
                    url: delYearPlanDetailApi,
                    params: { id }
                })
                if (code == 200) {
                    this.$message.success('删除成功')
                    this.getYearDetailPlanList()
                } else {
                    this.$message.error('删除失败')
                }
            })
        },
        // æ‰¹å‡†å¹´åº¦è®¡åˆ’
        approvalYearPlan(row) {
            this.$confirm('确认批准该年度计划?', '提示', {
                confirmButtonText: '批准',
                cancelButtonText: '不批准',
                type: 'info'
            }).then(() => {
                this.approvalYearPlanFun(1, row.id)
            }).catch(action => {
              this.approvalYearPlanFun(0, row.id)
            })
        },
      // å¹´åº¦è®¡åˆ’表-下载
      downLoadPost(row) {
        this.$axios.get(exportSuperVisePlanApi + '?id=' + row.id,{responseType: "blob"}).then(res => {
          this.outLoading = false
          this.$message.success('导出成功')
          const blob = new Blob([res],{ type: 'application/msword' });
          const url = URL.createObjectURL(blob);
          const link = document.createElement('a');
          link.href = url;
          link.download = row.fileName + '.docx';
          link.click();
        })
      },
      async approvalYearPlanFun(approvalStatus, rowId) {
        const { code } = await this.$axios({
          method: 'get',
          url: yearPlanDetailApprovalApi,
          params: {
            id: rowId,
            approvalStatus: approvalStatus
          },
        })
        if (code == 200) {
          this.$message.success('操作成功！')
          this.getYearPlanList()
        } else {
          this.$message.error('操作成功！')
        }
      }
    }
}
</script>
<style scoped>
.flex_column {
    display: flex;
    height: 80vh;
    flex-direction: column;
    overflow: auto;
    justify-content: space-between;
}

.pagination {
    display: flex;
    justify-content: space-between
}

.items_center {
    display: flex;
    align-items: center;
}

.date_box {
    margin: 0 5px;
}

.search {
    width: 150px;
    padding: 0 16px;
}
</style>

 src/components/caorui/Department/components/Records/Add.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,243 @@
<template>
    <div class="add">
        <el-dialog
            :isEdit="isEdit"
            :title="isEdit ? '编辑工作监督记录':'新增工作监督记录'"
            :visible.sync="dialogVisible"
            width="800"
        >
            <el-steps v-if="isEdit" :active="active" :align-center="true" finish-status="success">
                <el-step style="cursor: pointer;" title="检测" @click.native="setStep(0)"></el-step>
                <el-step style="cursor: pointer;" title="审批" @click.native="setStep(1)"></el-step>
            </el-steps>
            <SuperviseForm
                v-show="pageStatus == 0"
                ref="superviseFormRef"
                :disabled="active != 0"
                :isEdit="isEdit"
                :superviseForm.sync="mainForm.superviseForm"
                :userList="userList"
                @addData="addData"
                @close="closeDialog"
                @submit="submit"
            ></SuperviseForm>
            <ApproveForm
                v-show="pageStatus == 1"
                ref="approveFormRef"
                :approveForm.sync="mainForm.approveForm"
                :disabled="active != 1"
                :isEdit="isEdit"
                :userList="userList"
                @close="toClose"
                @submit="submit"
            ></ApproveForm>
            <el-result v-show="pageStatus == 2" icon="success" subTitle="处理完成" title="审核完成">
            </el-result>
        </el-dialog>
    </div>
</template>
<script>
import SuperviseForm from './supervise/SuperviseForm.vue'
import ApproveForm from './supervise/ApproveForm.vue'
import {
    getUserListApi,
    addOrUpdatePersonSupervisionRecord
} from "../../../../../assets/api/api"
import dayjs from 'dayjs'

export default {
    components: {
        SuperviseForm,
        ApproveForm
    },
    data() {
        return {
            active: 0,
            pageStatus: 0,
            isEdit: false,
            dialogVisible: false,
            userList: [],
            id: undefined,
            mainForm: {
                superviseForm: {
                    testerId: undefined,
                    supervisorId: undefined,
                    testItem: undefined,
                    sampleNumber: undefined,
                    detectionDate: undefined,
                    personnel: [],
                    instrumentEquipment: undefined,
                    workingEnvironment: undefined,
                    sampleCollection: undefined,
                    samplePreparation: undefined,
                    testMethod: undefined,
                    testingRecords: undefined,
                    testReport: undefined,
                    evaluationSupervisionSituation: undefined,
                    doNotMeetTheHandlingOpinions: undefined,
                },
                approveForm: {
                    technicalDirector: undefined
                }
            }
        }
    },
    methods: {
        async openDialog(row, type=false) {
            this.dialogVisible = true
            this.isEdit = type
            await this.getUserList()
            if(this.isEdit) {
                // ç¼–辑
                this.loadForm(row)
                this.id = row.id
            } else {
                // æ–°å¢ž
                this.resetForm(row)
                this.id = undefined
            }
        },
        /**
         * @desc åŠ è½½è¡¨å•
         */
         loadForm(row) {
            if(row.currentState) {
                this.active = Number(row.currentState)
                this.pageStatus = Number(row.currentState === '2' ? 0 : row.currentState)
            }
            // ç¬¬1æ­¥
            this.mainForm.superviseForm.testerId = row.testerId
            this.mainForm.superviseForm.supervisorId = row.supervisorId
            this.mainForm.superviseForm.testItem = row.testItem
            this.mainForm.superviseForm.sampleNumber = row.sampleNumber
            this.mainForm.superviseForm.detectionDate = row.detectionDate
            let personList = row.personnel.split(',')
            this.mainForm.superviseForm.personnel = personList.map(item => {
                return Number(item)
            });
            this.mainForm.superviseForm.instrumentEquipment = row.instrumentEquipment
            this.mainForm.superviseForm.workingEnvironment = row.workingEnvironment
            this.mainForm.superviseForm.sampleCollection = row.sampleCollection
            this.mainForm.superviseForm.samplePreparation = row.samplePreparation
            this.mainForm.superviseForm.testMethod = row.testMethod
            this.mainForm.superviseForm.testingRecords = row.testingRecords
            this.mainForm.superviseForm.testReport = row.testReport
            this.mainForm.superviseForm.evaluationSupervisionSituation = row.evaluationSupervisionSituation
            this.mainForm.superviseForm.doNotMeetTheHandlingOpinions = row.doNotMeetTheHandlingOpinions
            // ç¬¬2æ­¥
            this.mainForm.approveForm.technicalDirector = row.technicalDirector
        },
        /**
         * @desc é‡ç½®è¡¨å•
         */
         resetForm(row) {
            console.log(row)
            this.active = 0
            this.pageStatus = 0
            // ç¬¬1个
            this.mainForm.superviseForm.currentState = undefined
            this.mainForm.superviseForm.testerId = undefined
            this.mainForm.superviseForm.supervisorId = undefined
            this.mainForm.superviseForm.testItem = undefined
            this.mainForm.superviseForm.sampleNumber = undefined
            this.mainForm.superviseForm.detectionDate = undefined
            this.mainForm.superviseForm.personnel = [row.departId]
            this.mainForm.superviseForm.instrumentEquipment = undefined
            this.mainForm.superviseForm.workingEnvironment = undefined
            this.mainForm.superviseForm.sampleCollection = undefined
            this.mainForm.superviseForm.samplePreparation = undefined
            this.mainForm.superviseForm.testMethod = undefined
            this.mainForm.superviseForm.testingRecords = undefined
            this.mainForm.superviseForm.testReport = undefined
            this.mainForm.superviseForm.evaluationSupervisionSituation = undefined
            this.mainForm.superviseForm.doNotMeetTheHandlingOpinions = undefined
            // ç¬¬2个
            this.mainForm.approveForm.technicalDirector = undefined
        },
        closeDialog() {
            this.dialogVisible = false
        },
        /**
         * @desc èŽ·å–用户信息
         */
        async getUserList() {
            const { code, data } = await this.$axios({
                method: 'get',
                url: getUserListApi,
            })
            if(code == 200) {
                this.userList = data
            }
        },
        /**
         * @desc é©³å›ž
         */
        toClose() {
            this.submitFormApi({
                id: this.id,
                currentState: 0,
            })
        },
        /**
         * @desc æ–°å¢ž
         */
        addData(step) {
            let data = this.setParams(step)
            this.submitFormApi(data)
        },
        /**
         * @desc ç¼–辑
         */
        submit(step) {
            console.log('编辑', this.isEdit)
            let data = this.setParams(step)
            data.id = this.id
            this.submitFormApi(data)
        },
        // è®¾ç½®å‚æ•°
        setParams(step) {
            if(step == 1) {
                let result = this.mainForm.superviseForm
                result.currentState = this.active + 1
                result.personnel = result.personnel.join(",")
                result.technicalDirectorDate = dayjs().format('YYYY-MM-DD HH:mm:ss')
                return result
            }
            if(step == 2) {
                let result = this.mainForm.approveForm
                result.currentState = this.active + 1
                return result
            }
        },
        // å‘服务器发送表单
        async submitFormApi(data) {
            console.log('接口表单', data)
            const { code } = await this.$axios({
                method: 'post',
                url: addOrUpdatePersonSupervisionRecord,
                data: data,
                noQs: true
            })
            if(code == 200) {
                this.$message.success('操作成功')
                this.dialogVisible = false
                this.$emit('submit')
            }
        },
        setStep(e) {
            this.pageStatus = e
        }
    }
}
</script>
<style scoped>
.foot {
    width: 100%;
}
.add >>> .el-dialog__footer {
    padding-right: 20px;
}
.main_right {
    text-align: left;
}
</style>

 src/components/caorui/Department/components/Records/control/Step/ConditionForm.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,164 @@
<template>
    <el-form
        label-width="160px"
        :model="form"
        :disabled="disabled"
        style="position: relative;"
        size="small"
    >
        <el-card :body-style="{ height: '350px', overflow: 'auto'}">
            <el-form-item label="部门负责人">
                <el-select
                    v-model="form.departmentHeadId" 
                    placeholder="请选择"
                    style="width: 100%"
                >
                    <el-option
                        v-for="(item, index) in userList"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="被监督人">
                <el-select
                    v-model="form.supervisedPersonId" 
                    placeholder="请选择"
                    style="width: 100%"
                >
                    <el-option
                        v-for="(item, index) in userList"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="不符合工作发现途径">
                <el-checkbox-group 
                    v-model="form.discoveryApproach"
                >
                    <el-checkbox
                        v-for="(item, index) in checkbox"
                        :key="index"
                        :label="item.value" 
                        name="type"
                    >{{ item.label }}
                    </el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="不符合工作的详细记录">
                <el-input
                    v-model="form.notConformDetails"
                    type="textarea"
                    :rows="2"
                    placeholder="请输入内容"
                ></el-input>
            </el-form-item>
            <el-form-item label="不符合的依据及条款号">
                <el-input 
                    v-model="form.nonConformityClause"
                    type="textarea"
                    :rows="2"
                    placeholder="请输入内容"
                ></el-input>
            </el-form-item>
        </el-card>
        <el-form-item label-width="0">
            <div style=" display: flex; width: 100%; justify-content: space-between; margin-top: 15px;">
                <div>
                    æ“ä½œäººï¼š{{ currentResponsible }}
                </div>
                <div v-if="step == 0 || step == 1">
                    <el-button v-if="step == 1" :disabled="false" @click="cancel">驳回</el-button>
                    <el-button :disabled="false" @click="save">保存</el-button>
                    <el-button type="primary" @click="onSubmit" :disabled="false">提交</el-button>
                </div>
            </div>
        </el-form-item>
    </el-form>
</template>
<script>

export default {
    props: {
        currentResponsible: {
            type: String,
            default: ''
        },
        disabled: {
            type: Boolean,
            default: false
        },
        userList: {
            type: Array,
            default: () => {
                return []
            }
        },
        step: {
            type: Number,
            default: 0
        },
        condiForm: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    computed: {
        form: {
            get() {
                return this.condiForm
            },
            set(val) {
                this.$emit('update:condiForm', val)
            }
        }
    },
    data() {
        return {
            checkbox: [
                {
                    label: '管理评审',
                    value: 0
                }, {
                    label: '内部审核',
                    value: 1
                }, {
                    label: '检测过程控制',
                    value: 2
                }, {
                    label: '内部质量控制',
                    value: 3
                }, {
                    label: '内部监督',
                    value: 4
                }, {
                    label: '外部评审/检查',
                    value: 5
                }, {
                    label: '顾客投诉/意见反馈',
                    value: 6
                }, {
                    label: '其他',
                    value: 7
                }
            ],
        }
    },
    methods: {
        onSubmit() {
            this.$emit('nextStep', 'submit')
        },
        save() {
            this.$emit('nextStep', 'save')
        },
        cancel() {
            this.$emit('cancel', 'cancel')
        }
    }
}
</script>

 src/components/caorui/Department/components/Records/control/Step/Inform.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,99 @@
<template>
    <el-form 
        :model="form" 
        label-width="160px"
        style="position: relative"
        :disabled="disabled"
        size="small"
    >
        <el-card :body-style="{ height: '350px', overflow: 'auto'}">
            <el-form-item label="通知客户">
                <el-radio-group v-model="form.whetherInformCustomer">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="2">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="恢复工作">
                <el-radio-group v-model="form.whetherResumeWork">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="2">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="质量负责人">
                <el-select  v-model="form.qualitySupervisorId" placeholder="请选择">
                    <el-option
                        v-for="(item, index) in userList"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
        </el-card>
        <el-form-item label-width="0">
            <div style=" display: flex; width: 100%; justify-content: space-between; margin-top: 15px;">
                <div>
                    æ“ä½œäººï¼š{{ currentResponsible }}
                </div>
                <div v-if="step == 4" >
                    <el-button @click="cancel">驳回</el-button>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                </div>
            </div>
        </el-form-item>
    </el-form>
</template>
<script>
export default {
    props: {
        currentResponsible: {
            type: String,
            default: ''
        },
        disabled: {
            type: Boolean,
            default: false
        },
        userList: {
            type: Array,
            default: []
        },
        step: {
            type: Number,
            default: 0
        },
        inform: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    computed: {
        form: {
            get() {
                return this.inform
            },
            set(val) {
                this.$emit('update:inform', val)
            }
        }
    },
    data() {
        return {
           
        }
    },
    methods: {
        onSubmit() {
            this.$emit('nextStep', 'submit')
        },
        save() {
            this.$emit('nextStep', 'save')
        },
        cancel() {
            this.$emit('cancel', 'cancel')
        }
    }
}
</script>

 src/components/caorui/Department/components/Records/control/Step/MeasureForm.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,94 @@
<template>
    <el-form
        :model="form"
        label-width="200px"
        style="position: relative;"
        :disabled="disabled"
        size="small"
    >
        <el-card :body-style="{ height: '350px', overflow: 'auto'}">
            <el-form-item label="责任部门">
                <el-select v-model="form.responsibleDepartmentPersonId" placeholder="请选择">
                    <el-option
                        v-for="(item, index) in userList"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="消除不符合工作所采取的措施">
                <el-input 
                    v-model="form.treatmentMeasures"
                    type="textarea"
                    :rows="2"
                    placeholder="请输入内容"
                ></el-input>
            </el-form-item>
        </el-card>
        <el-form-item v-if="step == 2" label-width="0px" :disabled="disabled">
            <div style=" display: flex; width: 100%; justify-content: space-between; margin-top: 15px;">
                <div>
                    æ“ä½œäººï¼š{{ currentResponsible }}
                </div>
                <div>
                    <el-button @click="cancel">驳回</el-button>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                </div>
            </div>
        </el-form-item>
    </el-form>
</template>
<script>
export default {
    props: {
        currentResponsible: {
            type: String,
            default: ''
        },
        disabled: {
            type: Boolean,
            default: false
        },
        userList: {
            type: Array,
            default: []
        },
        step: {
            type: Number,
            default: 0
        },
        handleForm: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    computed: {
        form: {
            get() {
                return this.handleForm
            },
            set(val) {
                this.$emit('update:handleForm', val)
            }
        }
    },
    data() {
        return {
        }
    },
    methods: {
        onSubmit() {
            this.$emit('nextStep', 'submit')
        },
        save() {
            this.$emit('nextStep', 'save')
        },
        cancel() {
            this.$emit('cancel', 'cancel')
        }
    }
}
</script>

 src/components/caorui/Department/components/Records/control/Step/RectifyForm.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,98 @@
<template>
    <el-form
        :model="form"
        label-width="160px"
        style="position: relative"
        :disabled="disabled"
        size="small"
    >
        <el-card :body-style="{ height: '350px', overflow: 'auto'}">
            <el-form-item label="是否需要采取纠正措施">
                <el-radio-group v-model="form.correctiveMeasure">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="2">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="纠正措施处理单跟踪">
                <el-radio-group v-model="form.correctiveMeasureFollowTracks">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="2">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="技术负责人">
                <el-select v-model="form.correctiveMeasurePersonId" placeholder="请选择">
                    <el-option
                        v-for="(item, index) in userList"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
        </el-card>
        <el-form-item label-width="0">
            <div style=" display: flex; width: 100%; justify-content: space-between; margin-top: 15px;">
                <div>
                    æ“ä½œäººï¼š{{ currentResponsible }}
                </div>
                <div v-if="step == 3">
                    <el-button @click="cancel">驳回</el-button>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                </div>
            </div>
        </el-form-item>
    </el-form>
</template>
<script>
export default {
    props: {
        currentResponsible: {
            type: String,
            default: ''
        },
        disabled: {
            type: Boolean,
            default: false
        },
        userList: {
            type: Array,
            default: []
        },
        step: {
            type: Number,
            default: 0
        },
        rectifyForm: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    computed: {
        form: {
            get() {
                return this.rectifyForm
            },
            set(val) {
                this.$emit('update:rectifyForm', val)
            }
        }
    },
    data() {
        return {
        }
    },
    methods: {
        onSubmit() {
            this.$emit('nextStep', 'submit')
        },
        save() {
            this.$emit('nextStep', 'save')
        },
        cancel() {
            this.$emit('cancel', 'cancel')
        }
    }
}
</script>

 src/components/caorui/Department/components/Records/control/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,331 @@
<template>
    <div>
        <el-dialog
            :visible.sync="dialogVisible"
            title="不符合工作控制单"
        >
            <el-steps :active="active" :align-center="true" finish-status="success">
                <el-step
                    v-for="(item, index) in stepList"
                    :key="index"
                    :title="item.label"
                    style="cursor: pointer;"
                    @click.native="setStep(item.value)"
                ></el-step>
            </el-steps>
            <el-divider></el-divider>
                <ConditionForm
                    v-if="pageStatus == 0"
                    :condiForm.sync="mainForm.condiForm"
                    :currentResponsible="currentResponsible"
                    :disabled="active != 0"
                    :step="active"
                    :userList="userList"
                    @nextStep="submit"
                ></ConditionForm>
                <ConditionForm
                    v-if="pageStatus == 1"
                    :condiForm.sync="mainForm.condiForm"
                    :currentResponsible="currentResponsible"
                    :disabled="true"
                    :step="active"
                    :userList="userList"
                    @cancel="cancel"
                    @nextStep="submit"
                ></ConditionForm>
                <MeasureForm
                    v-if="pageStatus == 2"
                    :currentResponsible="currentResponsible"
                    :disabled="active != 2"
                    :handleForm.sync="mainForm.handleForm"
                    :step="active"
                    :userList="userList"
                    @cancel="cancel"
                    @nextStep="submit"
                ></MeasureForm>
                <RectifyForm
                    v-if="pageStatus == 3"
                    :currentResponsible="currentResponsible"
                    :disabled="active != 3"
                    :rectifyForm.sync="mainForm.rectifyForm"
                    :step="active"
                    :userList="userList"
                    @cancel="cancel"
                    @nextStep="submit"
                ></RectifyForm>
                <Inform
                    v-if="pageStatus == 4"
                    :disabled="active != 4"
                    :inform.sync="mainForm.inform"
                    :step="active"
                    :userList="userList"
                    @cancel="cancel"
                    @nextStep="submit"
                ></Inform>
                <el-result v-if="pageStatus == 5" icon="success" subTitle="处理完成" title="审核完成">
                </el-result>
        </el-dialog>
    </div>
</template>
<script>
import ConditionForm from './Step/ConditionForm.vue'
import MeasureForm from './Step/MeasureForm.vue'
import RectifyForm from './Step/RectifyForm.vue'
import Inform from './Step/Inform.vue'
import {
    personSupervisionControlSheetPage,
    getUserListApi,
    addOrUpdatePersonSupervisionControl
} from "../../../../../../assets/api/api"

export default {
    components: {
        ConditionForm, MeasureForm, RectifyForm, Inform
    },
    data() {
        return {
            active: 0,
            pageStatus: 0,
            dialogVisible: false,
            currentResponsible: undefined,
            stepList: [{
                    label: '工作情况',
                    value: 0
                }, {
                    label: '被监督人确认',
                    value: 1
                }, {
                    label: '处理措施',
                    value: 2
                }, {
                    label: '纠正措施',
                    value: 3
                }, {
                    label: '通知客户',
                    value: 4
                }
            ],
            supervisionRecordId: undefined,
            controlId: undefined,
            mainForm: {
                condiForm: {
                    departmentHeadId: undefined,
                    supervisedPersonId: undefined,
                    discoveryApproach: [],
                    notConformDetails: undefined,
                    nonConformityClause: undefined,
                },
                handleForm: {
                    responsibleDepartmentPersonId: undefined,
                    treatmentMeasures: undefined
                },
                rectifyForm: {
                    correctiveMeasure: undefined,
                    correctiveMeasureFollowTracks: undefined,
                    correctiveMeasurePersonId: undefined
                },
                inform: {
                    whetherInformCustomer: undefined,
                    whetherResumeWork: undefined,
                    qualitySupervisorId: undefined
                }
            },
            userList: [],
            controlType: undefined
        }
    },
    methods: {
        /**
         * @desc åˆå§‹åŒ–表单
         */
        initForm() {
            this.mainForm.condiForm.departmentHeadId = undefined
            this.mainForm.condiForm.supervisedPersonId = undefined
            this.mainForm.condiForm.discoveryApproach = []
            this.mainForm.condiForm.notConformDetails = undefined
            this.mainForm.condiForm.nonConformityClause = undefined
            this.mainForm.handleForm.responsibleDepartmentPersonId = undefined
            this.mainForm.handleForm.treatmentMeasures = undefined
            this.mainForm.rectifyForm.correctiveMeasure = undefined
            this.mainForm.rectifyForm.correctiveMeasureFollowTracks = undefined
            this.mainForm.rectifyForm.correctiveMeasurePersonId = undefined
            this.mainForm.inform.whetherInformCustomer = undefined
            this.mainForm.inform.whetherResumeWork = undefined
            this.mainForm.inform.qualitySupervisorId = undefined
        },
        /**
         * @desc æ‰“开模态框
         * @param {监督记录id} id
         */
        openDialog(id) {
            this.dialogVisible = true
            this.getUserList()
            this.getControlData(id)
        },
        /**
         * @desc èŽ·å–用户信息
         */
         async getUserList() {
            const { code, data } = await this.$axios({
                method: 'get',
                url: getUserListApi,
            })
            if(code == 200) {
                this.userList = data
            }
        },
        /**
         * @desc æŸ¥è¯¢ç›‘督记录控制单
         * @param {监督记录id} id
         */
        async getControlData(id) {
            const { code, data } = await this.$axios({
                method: 'get',
                url: personSupervisionControlSheetPage,
                params: {id}
            })
            if(code == 202) {
                this.controlType = '新增'
                this.supervisionRecordId = id
                this.active = 0
                this.pageStatus = 0
                this.controlId = undefined
                this.initForm()
            }
            if(code == 200) {
                this.currentResponsible = data.currentResponsible
                this.controlType = '编辑'
                this.controlId = data.id
                this.active = Number(data.currentState)
                this.pageStatus = Number(data.currentState === 4 ? 0 : data.currentState)
                // ç¬¬1、2步数据
                this.mainForm.condiForm.departmentHeadId = data.departmentHeadId
                this.mainForm.condiForm.supervisedPersonId = data.supervisedPersonId
                this.mainForm.condiForm.notConformDetails = data.notConformDetails
                this.mainForm.condiForm.nonConformityClause = data.nonConformityClause
                // ç¬¬3步数据
                this.mainForm.handleForm.responsibleDepartmentPersonId = data.responsibleDepartmentPersonId
                this.mainForm.handleForm.treatmentMeasures = data.treatmentMeasures
                // ç¬¬4步数据
                this.mainForm.rectifyForm.correctiveMeasure = data.correctiveMeasure
                this.mainForm.rectifyForm.correctiveMeasureFollowTracks = data.correctiveMeasureFollowTracks
                this.mainForm.rectifyForm.correctiveMeasurePersonId = data.correctiveMeasurePersonId
                // ç¬¬5步数据
                this.mainForm.whetherInformCustomer = data.whetherInformCustomer
                this.mainForm.whetherResumeWork = data.whetherResumeWork
                this.mainForm.qualitySupervisorId = data.qualitySupervisorId
                this.supervisionRecordId = data.supervisionRecordId
            }
        },
        submit(type) {
            let currentState = undefined
            if(type == 'submit') {
                currentState = this.active + 1
            } else if(type == 'save') {
                currentState = undefined
            }
            if(this.active == 0) {
                let { discoveryApproach, ...condiFormRest } = this.mainForm.condiForm
                let approcahStr = discoveryApproach.join(',')
                this.submitForm({
                    id: this.controlId,
                    supervisionRecordId: this.supervisionRecordId,
                    discoveryApproach: approcahStr,
                    currentState: currentState,
                  discovererDate: this.$moment().format('YYYY-MM-DD HH:mm:ss'),
                    ...condiFormRest
                })
            }
            if(this.active == 1) {
                let { discoveryApproach, ...condiFormRest } = this.mainForm.condiForm
                let approcahStr = discoveryApproach.join(',')
                this.submitForm({
                    id: this.controlId,
                    supervisionRecordId: this.supervisionRecordId,
                    discoveryApproach: approcahStr,
                    currentState: currentState,
                  supervisedPersonDate: this.$moment().format('YYYY-MM-DD'),
                    ...condiFormRest
                })
            }
            if(this.active == 2) {
                let { handleForm } = this.mainForm
                this.submitForm({
                    id: this.controlId,
                    supervisionRecordId: this.supervisionRecordId,
                    currentState: currentState,
                  responsibleDepartmentDate: this.$moment().format('YYYY-MM-DD HH:mm:ss'),
                    ...handleForm
                })
            }
            if(this.active == 3) {
                let { rectifyForm } = this.mainForm
                this.submitForm({
                    id: this.controlId,
                    supervisionRecordId: this.supervisionRecordId,
                    currentState: currentState,
                  correctiveMeasureDate: this.$moment().format('YYYY-MM-DD HH:mm:ss'),
                    ...rectifyForm
                })
            }
            if(this.active == 4) {
                let { inform } = this.mainForm
                this.submitForm({
                    id: this.controlId,
                    supervisionRecordId: this.supervisionRecordId,
                    currentState: currentState,
                  qualitySupervisorDate: this.$moment().format('YYYY-MM-DD HH:mm:ss'),
                    ...inform
                })
            }
        },
        /**
         * @desc æäº¤è¡¨å•
         */
        async submitForm(form) {
            let user = JSON.parse(localStorage.getItem('user'));
            const { code } = await this.$axios({
                method: 'post',
                url: addOrUpdatePersonSupervisionControl,
                data: {
                    currentResponsible: user.name,
                    ...form
                },
                noQs: true
            })
            if(this.controlType == '新增') {
                if(code == 200) {
                    this.$message.success('提交成功')
                }
            } else if(this.controlType == '编辑') {
                if(code == 200) {
                    this.$message.success('提交成功')
                }
            }
            this.dialogVisible = false
        },
        /**
         * @desc é©³å›ž
         */
        cancel() {
            let currentState = this.active - 1
            this.submitForm({
                id: this.controlId,
                supervisionRecordId: this.supervisionRecordId,
                currentState: currentState,
            })
        },
        setStep(e) {
            this.pageStatus = e
        }
    }
}
</script>
<style scoped>
.dialog-footer {
    width: 100%;
}
>>> .el-dialog__footer {
    padding-right: 20px;
}
</style>

 src/components/caorui/Department/components/Records/dispose/Step/Fact.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,99 @@
<template>
    <el-form 
        :model="form" 
        :disabled="disabled"
        label-width="140px"
        size="small"
        style="position: relative"
    >
        <el-card :body-style="{ height: '350px', overflow: 'auto'}">
            <el-form-item label="提出部门">
                <el-select
                    v-model="form.proposingDepartmentPersonId" 
                    placeholder="请选择"
                    style="width: 100%"
                >
                    <el-option
                        v-for="(item, index) in userList"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="不合格或偏离描述">
                <el-input type="textarea"
                    v-model="form.descriptionNonconformity"
                    :rows="2"
                    placeholder="请输入内容"
                >
                </el-input>
            </el-form-item>
        </el-card>
        <el-form-item label-width="0">
            <div style="display: flex; width: 100%; justify-content: space-between; margin-top: 15px;">
                <div>
                    æ“ä½œäººï¼š{{ currentResponsible }}
                </div>
                <div v-if="step == 0">
                    <el-button :disabled="false" @click="cancel">驳回</el-button>
                    <el-button @click="save">保存</el-button>
                    <el-button type="primary" @click="submit">提交</el-button>
                </div>
            </div>
        </el-form-item>
    </el-form>
</template>
<script>
export default {
    props: {
        currentResponsible: {
            type: String,
            default: ''
        },
        factForm: {
            type: Object,
            default: () => {
                return {}
            }
        },
        userList: {
            type: Array,
            default: []
        },
        step: {
            type: Number,
            default: 0
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        form: {
            get() {
                return this.factForm
            },
            set(val) {
                this.$emit('update:factForm', val)
            }
        }
    },
    data() {
        return {
        }
    },
    methods: {
        submit() {
            this.$emit('nextStep', 'submit')
        },
        save() {
            this.$emit('nextStep', 'save')
        },
        cancel() {
            this.$emit('cancel', 'cancel')
        }
    }
}
</script>

 src/components/caorui/Department/components/Records/dispose/Step/Measure.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,101 @@
<template>
    <el-form 
        :model="form"
        :disabled="disabled"
        label-width="130px" 
        size="small"
        style="position: relative"
    >
        <el-card :body-style="{ height: '350px', overflow: 'auto'}">
            <el-form-item label="责任人">
                <el-select v-model="form.correctiveActionId" placeholder="请选择">
                    <el-option
                        v-for="(item, index) in userList"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
          <el-form-item label="纠正措施">
            <el-input type="textarea"
                      v-model="form.correctiveMeasure"
                      :rows="2"
                      placeholder="请输入内容"
            >
            </el-input>
          </el-form-item>
            <el-form-item label="提出要求部门确认">
              <el-input type="textarea"
                        v-model="form.requestDepartmentConfirmation"
                        :rows="2"
                        placeholder="请输入内容"
              >
              </el-input>
            </el-form-item>
        </el-card>
        <el-form-item label-width="0">
            <div style="display: flex; width: 100%; justify-content: space-between; margin-top: 15px;">
                <div>
                    æ“ä½œäººï¼š{{ currentResponsible }}
                </div>
                <div v-if="step == 2">
                    <el-button :disabled="false" @click="cancel">驳回</el-button>
                    <el-button type="primary" @click="submit">提交</el-button>
                </div>
            </div>
        </el-form-item>
    </el-form>
</template>
<script>
export default {
    props: {
        currentResponsible: {
            type: String,
            default: ''
        },
        measureForm: {
            type: Object,
            default: {}
        },
        userList: {
            type: Array,
            default: []
        },
        step: {
            type: Number,
            default: 0
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        form: {
            get() {
                return this.measureForm
            },
            set(val) {
                this.$emit('update:measureForm', val)
            }
        }
    },
    data() {
        return {
           
        }
    },
    methods: {
        submit() {
            this.$emit('nextStep', 'submit')
        },
        save() {
            this.$emit('nextStep', 'save')
        },
        cancel() {
            this.$emit('cancel', 'cancel')
        }
    }
}
</script>

 src/components/caorui/Department/components/Records/dispose/Step/Reason.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,97 @@
<template>
    <el-form 
        :model="form" 
        :disabled="disabled"
        label-width="140px"
        size="small"
        style="position: relative;"
    >
        <el-card :body-style="{ height: '350px', overflow: 'auto'}">
            <el-form-item label="责任部门">
                <el-select
                    v-model="form.causeAnalysisPersonId" 
                    placeholder="请选择"
                    style="width: 100%"
                >
                    <el-option
                        v-for="(item, index) in userList"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="原因分析">
                <el-input type="textarea"
                    v-model="form.causeAnalysis"
                    :rows="2"
                    placeholder="请输入内容"
                >
                </el-input>
            </el-form-item>
        </el-card>
        <el-form-item label-width="0">
            <div style="display: flex; width: 100%; justify-content: space-between; margin-top: 15px;">
                <div>
                    <span>操作人：{{ currentResponsible }}</span>
                </div>
                <div v-if="step == 1">
                    <el-button :disabled="false" @click="cancel">驳回</el-button>
                    <el-button type="primary" @click="submit">提交</el-button>
                </div>
            </div>
        </el-form-item>
    </el-form>
</template>
<script>
export default {
    props: {
        currentResponsible: {
            type: String,
            default: ''
        },
        userList: {
            type: Array,
            default: []
        },
        reasonForm: {
            type: Object,
            default: {}
        },
        step: {
            type: Number,
            default: 0
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        form: {
            get() {
                return this.reasonForm
            },
            set(val) {
                this.$emit('update:reasonForm', val)
            }
        }
    },
    data() {
        return {
            
        }
    },
    methods: {
        submit() {
            this.$emit('nextStep', 'submit')
        },
        save() {
            this.$emit('nextStep', 'save')
        },
        cancel() {
            this.$emit('cancel', 'cancel')
        }
    }
}
</script>

 src/components/caorui/Department/components/Records/dispose/Step/Result.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,98 @@
<template>
    <el-form 
        :model="form"
        :disabled="disabled"
        label-width="130px" 
        size="small"
        style="position: relative"
    >
    <el-card :body-style="{ height: '350px', overflow: 'auto'}">
        <el-form-item label="验证部门">
            <el-select
                v-model="form.verificationDepartmentPersonId" 
                placeholder="请选择"
                style="width: 100%"
            >
                <el-option
                    v-for="(item, index) in userList"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="实施验证结果">
            <el-input type="textarea"
                v-model="form.implementationVerificationResults"
                :rows="2"
                placeholder="请输入内容"
            >
            </el-input>
        </el-form-item>
    </el-card>
    <el-form-item label-width="0">
        <div style="display: flex; width: 100%; justify-content: space-between; margin-top: 15px;">
            <div>
                æ“ä½œäººï¼š{{ currentResponsible }}
            </div>
            <div v-if="step == 3">
                <el-button :disabled="false" @click="cancel">驳回</el-button>
                <el-button type="primary" @click="submit">提交</el-button>
            </div>
        </div>
    </el-form-item>
    </el-form>
</template>
<script>
export default {
    props: {
        currentResponsible: {
            type: String,
            default: ''
        },
        resultForm: {
            type: Object,
            default: {}
        },
        step: {
            type: Number,
            default: 0
        },
        disabled: {
            type: Boolean,
            default: false
        },
        userList: {
            type: Array,
            default: []
        },
    },
    computed: {
        form: {
            get() {
                return this.resultForm
            },
            set(val) {
                this.$emit('update:resultForm', val)
            }
        }
    },
    data() {
        return {
           
        }
    },
    methods: {
        submit() {
            this.$emit('nextStep', 'submit')
        },
        save() {
            this.$emit('nextStep', 'save')
        },
        cancel() {
            this.$emit('cancel', 'cancel')
        }
    }
}
</script>
<style scoped></style>

 src/components/caorui/Department/components/Records/dispose/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,278 @@
<template>
    <div>
        <el-dialog
            title="纠错处理单"
            :visible.sync="dialogVisible"
        >
            <el-steps
                :active="active"
                finish-status="success"
                :align-center="true"
            >
                <el-step
                    style="cursor: pointer;"
                    v-for="(item, index) in stepList"
                    :key="index"
                    :title="item.label"
                    @click.native="setStep(item.value)"
                ></el-step>
            </el-steps>
            <el-divider></el-divider>
            <Fact
                v-if="pageStatus == 0"
                :factForm.sync="mainForm.factForm"
                :userList="userList"
                :currentResponsible="currentResponsible"
                :disabled="active != 0"
                :step="active"
                @nextStep="submit"
                @cancel="cancel"
            ></Fact>
            <Reason
                v-if="pageStatus == 1"
                :reasonForm.sync="mainForm.reasonForm"
                :userList="userList"
                :currentResponsible="currentResponsible"
                :disabled="active != 1"
                :step="active"
                @nextStep="submit"
                @cancel="cancel"
            ></Reason>
            <Measure
                v-if="pageStatus == 2"
                :measureForm.sync="mainForm.measureForm"
                :userList="userList"
                :currentResponsible="currentResponsible"
                :disabled="active != 2"
                :step="active"
                @nextStep="submit"
                @cancel="cancel"
            ></Measure>
            <Result
                v-if="pageStatus == 3"
                :resultForm.sync="mainForm.resultForm"
                :userList="userList"
                :currentResponsible="currentResponsible"
                :disabled="active != 3"
                :step="active"
                @nextStep="submit"
                @cancel="cancel"
            ></Result>
            <!-- <div slot="footer" class="dialog-footer">
                <el-button v-if="active == 4" type="primary" @click="submit(5)">完成</el-button>
            </div> -->
        </el-dialog>
    </div>
</template>
<script>
import Fact from './Step/Fact.vue'
import Reason from './Step/Reason.vue'
import Measure from './Step/Measure.vue'
import Result from './Step/Result.vue'
import dayjs from 'dayjs'
import {
    getUserListApi,
    personSupervisionProcessingPage,
    addOrUpdatePersonnelServiceProcessing
 } from '../../../../../../assets/api/api'

export default {
    components: {
        Fact, Reason, Measure, Result
    },
    data() {
        return {
            active: 0,
            pageStatus: 0,
            dialogVisible: false,
            currentResponsible: undefined,
            stepList: [
                {
                    label: '问题描述',
                    value: 0
                }, {
                    label: '原因分析',
                    value: 1
                }, {
                    label: '纠正措施',
                    value: 2
                }, {
                    label: '验证结果',
                    value: 3
                }
            ],
            supervisionRecordId: undefined,
            processId: undefined,
            mainForm: {
                factForm: {
                    proposingDepartmentPersonId: undefined,
                    descriptionNonconformity: undefined
                },
                reasonForm: {
                    causeAnalysisPersonId: undefined,
                    causeAnalysis: undefined
                },
                measureForm: {
                    correctiveActionId: undefined,
                    correctiveMeasure: undefined,
                    requestDepartmentConfirmation: undefined
                },
                resultForm: {
                    verificationDepartmentPersonId: undefined,
                    implementationVerificationResults: undefined
                }
            },
            userList: [],
        }
    },
    methods: {
        openDialog(id) {
            this.dialogVisible = true
            this.getUserList()
            this.getProcessData(id)
        },
        /**
         * @desc èŽ·å–用户信息
         */
         async getUserList() {
            const { code, data } = await this.$axios({
                method: 'get',
                url: getUserListApi,
            })
            if(code == 200) {
                this.userList = data
            }
        },
        /**
         * @desc æŸ¥è¯¢ç›‘督记录处理单
         * @param {监督记录id} id
         */
        async getProcessData(id) {
            const { code, data } = await this.$axios({
                method: 'get',
                url: personSupervisionProcessingPage,
                params: {id}
            })
            if(code == 202) {
                this.controlType = '新增'
                this.supervisionRecordId = id
                this.active = 0
                this.pageStatus = 0
                this.processId = undefined
            }
            if(code == 200) {
                this.currentResponsible = data.currentResponsible
                this.controlType = '编辑'
                this.supervisionRecordId = id
                this.processId = data.processingId
                this.active = Number(data.currentState)
                this.pageStatus = Number(data.currentState === 2 ? 0 : data.currentState)
                // ç¬¬1步数据
                this.mainForm.factForm.proposingDepartmentPersonId = data.proposingDepartmentPersonId
                this.mainForm.factForm.descriptionNonconformity = data.descriptionNonconformity
                // ç¬¬2步数据
                this.mainForm.reasonForm.causeAnalysisPersonId = data.causeAnalysisPersonId
                this.mainForm.reasonForm.causeAnalysis = data.causeAnalysis
                // ç¬¬3步数据
                this.mainForm.measureForm.correctiveActionId = data.correctiveActionId
                this.mainForm.measureForm.correctiveMeasure = data.correctiveMeasure
                this.mainForm.measureForm.requestDepartmentConfirmation = data.requestDepartmentConfirmation == '1' ? true:false
                // ç¬¬4步数据
                this.mainForm.resultForm.verificationDepartmentPersonId = data.verificationDepartmentPersonId
                this.mainForm.resultForm.implementationVerificationResults = data.implementationVerificationResults
            }
        },
        closeDialog() {
            this.dialogVisible = false
        },
        submit(type) {
            let currentState = undefined
            if(type == 'submit') {
                currentState = this.active + 1
            } else if(type == 'save') {
                currentState = undefined
            }
            if(this.active == 0) {
                // ç¬¬1æ­¥
                console.log('第1æ­¥', this.active, currentState)
                let { factForm } = this.mainForm
                this.submitForm({
                    proposingDepartmentDate: dayjs().format('YYYY-MM-DD HH:mm:ss'),
                    currentState: currentState,
                    ...factForm
                })
            } else if(this.active == 1) {
                // ç¬¬2æ­¥
                console.log('第2æ­¥', this.active, currentState)
                let { reasonForm } = this.mainForm
                this.submitForm({
                    causeAnalysisDate: dayjs().format('YYYY-MM-DD HH:mm:ss'),
                    currentState: currentState,
                    ...reasonForm
                })
            } else if(this.active == 2) {
                // ç¬¬3æ­¥
                console.log('第3æ­¥', this.active, currentState)
                let { measureForm } = this.mainForm
                let { requestDepartmentConfirmation, ...measureFormRest } = measureForm
                this.submitForm({
                    correctiveActionDate: dayjs().format('YYYY-MM-DD HH:mm:ss'),
                    currentState: currentState,
                    requestDepartmentConfirmation: requestDepartmentConfirmation ? 1:2,
                    ...measureFormRest
                })
            } else if(this.active == 3) {
                // ç¬¬4æ­¥
                console.log('第4æ­¥', this.active, currentState)
                let { resultForm } = this.mainForm
                this.submitForm({
                    verificationDepartmentDate: dayjs().format('YYYY-MM-DD HH:mm:ss'),
                    currentState: currentState,
                    ...resultForm
                })
            }
        },
        /**
         * @desc æäº¤è¡¨å•
         */
        async submitForm(form) {
            console.log('提交表单', form)
            const { code } = await this.$axios({
                method: 'post',
                url: addOrUpdatePersonnelServiceProcessing,
                data: {
                    processingId: this.processId,
                    supervisionRecordId: this.supervisionRecordId,
                    ...form
                },
                noQs: true
            })
            if(this.controlType == '新增') {
                if(code == 200) {
                    this.$message.success('提交成功')
                }
            } else if(this.controlType == '编辑') {
                if(code == 200) {
                    this.$message.success('提交成功')
                }
            }
            this.dialogVisible = false
        },
        /**
         * @desc é©³å›ž
         */
         cancel() {
            let currentState = this.active - 1
            this.submitForm({
                id: this.processId,
                supervisionRecordId: this.supervisionRecordId,
                currentState: currentState,
            })
        },
        setStep(e) {
            console.log(e)
            this.pageStatus = e
        }
    }
}
</script>

 src/components/caorui/Department/components/Records/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,447 @@
<template>
    <div class="flex_column">
        <div>
            <TableCard :showTitle="false">
                <template v-slot:form>
                    <div class="items_center">
                        <!-- <span>关键字</span>
                        <el-input size="small" class="search" v-model="superviseForm.searchVal" placeholder="请输入"></el-input>
                        <el-button type="primary" size="small">查询</el-button> -->
                        <el-button v-if="multipleSelection.length > 0" slot="reference" size="small" type="danger"
                            @click="delRecords">删除</el-button>
                    </div>
                    <div>
                        <el-button size="small" type="primary" @click="addRecord">新增</el-button>
                    </div>
                </template>
                <template v-slot:table>
                    <ZTTable
                        :column="superviseColumnData"
                        :handleSelectionChange="handleSelectionChange"
                        :height="'calc(100vh - 19em)'"
                        :isSelection="true"
                        :table-data="superviseTableData"
                        :table-loading="superviseLoading"
                        rowKey="id"
                        style="margin-top: 18px; padding: 0 15px;"
                    >
                        <div slot="action" slot-scope="scope">
                            <el-button type="text" @click="openDownloadDia(scope.row)">
                                <span>导出</span>
                            </el-button>
                            <el-button type="text" @click="openRecord(scope.row)">
                                <span>监督记录</span>
                            </el-button>
                            <el-button type="text" @click="openControl(scope.row.id)">
                                <span :style="renderBtn(scope.row.currentStateControl)">控制单</span>
                            </el-button>
                            <el-button type="text" @click="openDispose(scope.row.id)">
                                <span :style="renderBtn(scope.row.currentStateProcessing)">处理单</span>
                            </el-button>
                        </div>
                    </ZTTable>
                    <!-- åˆ†é¡µ -->
                    <div class="pagination">
                        <div></div>
                        <el-pagination :page-size="pagination.pageSize" :page-sizes="[10, 20, 30, 40]"
                            :total="pagination.total" layout="total, sizes, prev, pager, next, jumper"
                            @current-change="currentChange" @size-change="sizeChange">
                        </el-pagination>
                    </div>
                </template>
            </TableCard>
        </div>
        <RecordAdd ref="recordModal" @submit="getTableData"></RecordAdd>
        <ControlModal ref="controlModal"></ControlModal>
        <DisposeModal ref="disposeModal"></DisposeModal>
        <el-dialog :visible.sync="downloadDialog" title="导出" width="600px">
            <span>
                <el-button :disabled="!download.currentStateControl" plain type="primary" @click="controlDown">控制单导出</el-button>
                <el-button :disabled="!download.currentStateProcessing" plain type="primary" @click="processingDown">处理单导出</el-button>
                <el-button plain type="primary" @click="supervisoryDown">监督记录导出</el-button>
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="downloadDialog = false">取 æ¶ˆ</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import TableCard from "../../../TableCard/index"
import RecordAdd from "./Add.vue"
import ZTTable from "../../../ZTTable/index.vue"
import ControlModal from "./control/index.vue"
import DisposeModal from "./dispose/index.vue"
import {
    personSupervisionRecordPage,
    deletePersonSupervisionRecord,
    personSupervisionProcessingPage,
    exportSupervisionControlSheet,
    exportSupervisionProcessingSheet,
    exportPersonSupervisionRecord
} from "../../../../../assets/api/api"

export default {
  props: {
    isDepartment: {
      type: Boolean,
      default: false
    },
    departId: {
      type: Number,
      default: () => {
        return null;
      }
    },
  },
    components: {
        TableCard,
        RecordAdd,
        ZTTable,
        ControlModal,
        DisposeModal
    },
    data() {
        return {
            loading: false,
            pagination: {
                current: 1,
                pageSize: 20,
                total: 0
            },
            // ç›‘督记录
            superviseForm: {
                searchVal: undefined
            },
            superviseColumnData: [
                {
                    label: 'id',
                    prop: 'id'
                }, {
                    label: '检测人员',
                    prop: 'testerName',
                    width: 120
                }, {
                    label: '监督人员',
                    prop: 'supervisorName',
                    width: 120
                }, {
                    label: '检验项目',
                    prop: 'testItem',
                    width: 120
                }, {
                    label: '样品编号',
                    prop: 'sampleNumber',
                    width: 120
                }, {
                    label: '检验日期',
                    prop: 'detectionDate',
                    width: 160
                }, {
                    label: '控制单状态',
                    prop: 'currentStateControl',
                    formatData: (item) => {
                        let result = undefined
                        switch (item) {
                            case '0':
                                result = '工作情况'
                                break;
                            case '1':
                                result = '被监督人确认'
                                break;
                            case '2':
                                result = '处理措施'
                                break;
                            case '3':
                                result = '纠正措施'
                                break;
                            case '4':
                                result = '通知客户'
                                break;
                        }
                        return result
                    },
                    width: 140,
                }, {
                    label: '流程单状态',
                    prop: 'currentStateProcessing',
                    formatData: (item) => {
                        let result = undefined
                        switch (item) {
                            case '0':
                                result = '问题描述'
                                break;
                            case '1':
                                result = '原因分析'
                                break;
                            case '2':
                                result = '纠正措施'
                                break;
                            case '3':
                                result = '验证结果'
                                break;
                        }
                        return result
                    },
                    width: 140,
                }, {
                    label: '人员',
                    prop: 'personnelName',
                    width: 150
                }, {
                    label: '设备仪器',
                    prop: 'instrumentEquipment',
                    width: 140
                }, {
                    label: '工作环境',
                    prop: 'workingEnvironment',
                    width: 140
                }, {
                    label: '样品采集',
                    prop: 'sampleCollection',
                    width: 140
                }, {
                    label: '样品的准备',
                    prop: 'samplePreparation',
                    width: 140
                }, {
                    label: '检验方法',
                    prop: 'testMethod',
                    width: 120
                }, {
                    label: '检测记录',
                    prop: 'testingRecords',
                    width: 120
                }, {
                    label: '检验报告',
                    prop: 'testReport',
                    width: 120
                }, {
                    label: '监督情况评价',
                    prop: 'evaluationSupervisionSituation',
                    width: 140
                }, {
                    label: '不符合处理意见',
                    prop: 'doNotMeetTheHandlingOpinions',
                    width: 140
                }, {
                    fixed: 'right',
                    dataType: "slot",
                    width: 280,
                    label: '操作',
                    slot: 'action',
                }
            ],
            superviseTableData: [],
            superviseLoading: false,
            multipleSelection: [],
            downloadDialog: false,
          download: {
            currentStateControl: '',
            currentStateProcessing: '',
          },
            downloadId: '',
        }
    },
    mounted() {
        this.getTableData()
    },
    methods: {
        /**
         * @desc èŽ·å–树的人员id
         */
        getDepart() {
            this.getTableData()
        },
        /**
         * @desc å½“前页改变
         */
        currentChange(current) {
            this.pagination.current = current
            this.getTableData()
        },
        /**
         * @desc æ¯é¡µä¸ªæ•°æ”¹å˜
         */
        sizeChange(pageSize) {
            this.pagination.pageSize = pageSize
            this.getTableData()
        },
        // èŽ·å–监督记录
        async getTableData() {
            this.loading = true
            const { code, data } = await this.$axios({
                method: 'get',
                url: personSupervisionRecordPage,
                params: {
                    departLimsId: this.isDepartment ? this.departId : null,
                    userId: this.isDepartment ? null : this.departId,
                    current: this.pagination.current,
                    size: this.pagination.pageSize
                }
            })
            if (code == 200) {
                this.superviseTableData = data.records
                this.pagination.total = data.total
            }
            this.loading = false
        },
        // æ–°å¢žç›‘督记录
        addRecord(row, type = false) {
            this.$refs.recordModal.openDialog({ departId: this.departId, ...row }, type)
        },
        openRecord(row) {
            this.$refs.recordModal.openDialog(row, true)
        },
        // æ‰“开导出弹框
        openDownloadDia(row) {
            this.downloadDialog = true
          this.download = row
            this.downloadId = row.id
        },
        // æŽ§åˆ¶å•å¯¼å‡º
        controlDown() {
            this.$axios.get(exportSupervisionControlSheet + '?supervisionRecordId=' + this.downloadId, { responseType: "blob" }).then(res => {
                this.outLoading = false
                this.$message.success('导出成功')
                const blob = new Blob([res], { type: 'application/msword' });
                const url = URL.createObjectURL(blob);
                const link = document.createElement('a');
                link.href = url;
                link.download = '控制单导出' + '.docx';
                link.click();
            })
        },
        // å¤„理单导出
        processingDown() {
            this.$axios.get(exportSupervisionProcessingSheet + '?supervisionRecordId=' + this.downloadId, { responseType: "blob" }).then(res => {
                this.outLoading = false
                this.$message.success('导出成功')
                const blob = new Blob([res], { type: 'application/msword' });
                const url = URL.createObjectURL(blob);
                const link = document.createElement('a');
                link.href = url;
                link.download = '处理单导出' + '.docx';
                link.click();
            })
        },
        // ç›‘督记录导出
        supervisoryDown() {
            this.$axios.get(exportPersonSupervisionRecord + '?id=' + this.downloadId, { responseType: "blob" }).then(res => {
                this.outLoading = false
                this.$message.success('导出成功')
                const blob = new Blob([res], { type: 'application/msword' });
                const url = URL.createObjectURL(blob);
                const link = document.createElement('a');
                link.href = url;
                link.download = '监督记录导出' + '.docx';
                link.click();
            })
        },
        // æ˜¾ç¤ºæŽ§åˆ¶å•
        openControl(id) {
            this.$refs.controlModal.openDialog(id)
        },
        // æ˜¾ç¤ºå¤„理单
        openDispose(id) {
            this.$refs.disposeModal.openDialog(id)
        },
        // è¡¨æ ¼å¤šé€‰æ¿€æ´»åŽåšä»€ä¹ˆ
        handleSelectionChange(val) {
            this.multipleSelection = val
        },
        /**
         * @desc æ‰¹é‡åˆ é™¤ç›‘督记录
         */
        delRecords() {
            this.$confirm(
                '此操作将删除选中数据, æ˜¯å¦ç»§ç»­?',
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                .then(() => {
                    console.log(this.multipleSelection)
                    let ids = this.multipleSelection.map((item) => item.id)
                    const code = this.delTableData(ids)
                    this.$message({
                        type: code == 200 ? 'success' : 'error',
                        message: code == 200 ? '删除成功！' : '删除失败！'
                    });
                    this.getTableData()
                })
        },
        // åˆ é™¤api
        async delTableData(ids) {
            const { code } = await this.$axios({
                method: 'delete',
                url: deletePersonSupervisionRecord,
                data: ids
            })
            return code
        },
        // è¡ŒèƒŒæ™¯è‰²
        renderBtn(currentState) {
            let status = Number(currentState)
            let res = {}
            switch (status) {
                case 0:
                    break;
                case 1:
                    res = {color: '#337ecc'}
                    break;
                case 2:
                    res = {color: '#409EFF'}
                    break;
                case 3:
                    res = {color: '#79bbff'}
                    break;
                case 4:
                    res = {color: '#a0cfff'}
                    break;
            }
            return res;
        }
    },
  watch: {
    // ç›‘听点击el-tree的数据，进行数据刷新
    departId: {
      handler(newId, oldId) {
        if (this.isDepartment) {
          this.getTableData();
        } else {
          this.getTableData()
        }
      }
    }
  }
}
</script>
<style scoped>
.flex_column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.pagination {
    display: flex;
    justify-content: space-between
}

.items_center {
    display: flex;
    align-items: center;
}

.date_box {
    margin: 0 5px;
}

.search {
    width: 150px;
    padding: 0 16px;
}
</style>

 src/components/caorui/Department/components/Records/supervise/ApproveForm.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,84 @@
<template>
    <el-form
        :model="form"
        label-width="100px"
        :disabled="disabled"
        size="small"
    >
        <el-form-item label="技术负责人">
            <el-select 
                v-model="form.technicalDirector" 
                placeholder="请选择" 
                style="width: 100%"
            >
                <el-option
                    v-for="(item, index) in userList"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                ></el-option>
            </el-select>
        </el-form-item>
        <!-- <el-form-item label="审批">
            <el-input 
                type="textarea"
                :rows="2" 
                placeholder="请输入"
            ></el-input>
        </el-form-item> -->
        <el-form-item v-if="!disabled" style="text-align: right;">
            <el-button size="small" type="danger" @click="close">驳回</el-button>
            <el-button size="small" type="primary" @click="submit">提交</el-button>
        </el-form-item>
    </el-form>
</template>
<script>
export default {
    props: {
        userList: {
            type: Array,
            default: () => {
                return []
            }
        },
        approveForm: {
            type: Object,
            default: {}
        },
        isEdit: {
            type: Boolean,
            default: false
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        form: {
            get() {
                return this.approveForm
            },
            set(val) {
                this.$emit('approveForm', val)
            }
        }
    },
    data() {
        return {
          
        }
    },
    methods: {
        submit() {
            this.$emit('submit', 2)
        },
        /**
         * @desc é©³å›ž
         */
        close() {
            this.$emit('close', 2)
        }
    }
}
</script>

 src/components/caorui/Department/components/Records/supervise/SuperviseForm.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,196 @@
<template>
     <el-form
        :model="ruleForm"
        :disabled="disabled"
        label-width="100px"
        size="small"
    >
        <el-row>
            <el-col :span="12">
                <el-form-item label="检测人员">
                    <el-select v-model="ruleForm.testerId" placeholder="请选择" style="width: 100%">
                        <el-option
                            v-for="(item, index) in userList"
                            :key="index"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="监督员">
                    <el-select v-model="ruleForm.supervisorId" placeholder="请选择" style="width: 100%">
                        <el-option
                            v-for="(item, index) in userList"
                            :key="index"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="检测项目">
                    <el-input v-model="ruleForm.testItem" placeholder="请输入"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="样品编号">
                    <el-input v-model="ruleForm.sampleNumber" placeholder="请输入"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="检测日期">
                    <el-date-picker
                        v-model="ruleForm.detectionDate"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        type="datetime"
                        placeholder="选择日期"
                        style="width: 100%;"
                    >
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="人员">
                    <el-select 
                        v-model="ruleForm.personnel" 
                        placeholder="请选择" 
                        style="width: 100%"
                        multiple
                    >
                        <el-option
                            v-for="(item, index) in userList"
                            :key="index"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="仪器设备">
                    <el-input v-model="ruleForm.instrumentEquipment" placeholder="请输入"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="工作环境">
                    <el-input v-model="ruleForm.workingEnvironment" placeholder="请输入"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="样品采集">
                    <el-input v-model="ruleForm.sampleCollection" placeholder="请输入"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="样品的准备">
                    <el-input v-model="ruleForm.samplePreparation" placeholder="请输入"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="检测方法">
                    <el-input v-model="ruleForm.testMethod" placeholder="请输入"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="检测记录">
                    <el-input v-model="ruleForm.testingRecords" placeholder="请输入"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="检测报告">
                    <el-input v-model="ruleForm.testReport" placeholder="请输入"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="监督情况评价">
                    <el-input v-model="ruleForm.evaluationSupervisionSituation" placeholder="请输入"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="处理意见">
                    <el-input v-model="ruleForm.doNotMeetTheHandlingOpinions" placeholder="请输入"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col v-show="isEdit && !disabled" :span="24">
                <el-form-item style="text-align: right;">
                    <el-button size="small" @click="close">取消</el-button>
                    <el-button size="small" type="primary" @click="approve">审批</el-button>
                </el-form-item>
            </el-col>
            <el-col v-show="!isEdit" :span="24">
                <el-form-item style="text-align: right;">
                    <el-button size="small" type="primary" @click="addData">提交</el-button>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
</template>
<script>

export default {
    props: {
        isEdit: {
            type: Boolean,
            default: false
        },
        userList: {
            type: Array,
            default: () => {
                return []
            }
        },
        superviseForm: {
            type: Object,
            default: {}
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        ruleForm: {
            get() {
                return this.superviseForm
            },
            set(val) {
                this.$emit('superviseForm', val)
            }
        }
    },
    data() {
        return {
        }
    },
    methods: {
        close() {
            this.$emit('close')
        },
        approve() {
            this.$emit('submit', 1)
        },
        addData() {
            this.$emit('addData', 1)
        }
    }
}
</script>

 src/components/caorui/Department/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,150 @@
<template>
  <el-tabs v-model="activeName" :lazy="true" type="border-card">
    <el-tab-pane label="人员基本信息" name="人员基本信息">
      <PersonnelList v-if="activeName === '人员基本信息' && isShowAll" ref="personnelList" :currentCompaniesList="currentCompaniesList"
                     :departId="departId" @refreshTree="refreshTree"
                     @updatePerson="updatePerson"></PersonnelList>
      <personnelInformation v-if="activeName === '人员基本信息' && !isShowAll" :clickNodeVal="clickNodeVal"></personnelInformation>
    </el-tab-pane>
    <el-tab-pane label="培训计划" name="培训计划">
      <PersonnelTraining v-if="activeName === '培训计划'" ref="personnelTraining"
                         :departId="departId" :isDepartment="isDepartment"></PersonnelTraining>
    </el-tab-pane>
    <el-tab-pane label="监督计划" name="监督计划">
      <Plan v-if="activeName === '监督计划'"></Plan>
    </el-tab-pane>
    <el-tab-pane label="岗位职责" name="岗位职责">
      <job-responsibilities v-if="activeName === '岗位职责'" ref="jobResponsibilities"
                            :departId="departId"
                            :isDepartment="isDepartment"></job-responsibilities>
    </el-tab-pane>
    <el-tab-pane label="工作履历" name="工作履历">
      <trackRecord v-if="activeName === '工作履历'" :clickNodeVal="clickNodeVal"></trackRecord>
    </el-tab-pane>
    <el-tab-pane label="奖惩记录" name="奖惩记录">
      <rewardPunishmentRecord v-if="activeName === '奖惩记录'"
                              :departId="departId" :isDepartment="isDepartment"></rewardPunishmentRecord>
    </el-tab-pane>
    <el-tab-pane label="培训记录" name="培训记录">
      <training-record v-if="activeName === '培训记录'" ref="trainingRecord"
                       :departId="departId"
                       :isDepartment="isDepartment"></training-record>
    </el-tab-pane>
    <el-tab-pane label="监督记录" name="监督记录">
      <Records v-if="activeName === '监督记录'" ref="recordsRef" :departId="departId" :isDepartment="isDepartment"></Records>
    </el-tab-pane>
    <el-tab-pane label="任职授权记录" name="任职授权记录">
      <Mandate v-if="activeName === '任职授权记录'" ref="manDateRef" :departId="departId" :isDepartment="isDepartment"></Mandate>
    </el-tab-pane>
    <el-tab-pane label="人员能力" name="人员能力">
      <personnel-capacity v-if="activeName === '人员能力'" ref="personnelCapacity"
                          :departId="departId"
                          :isDepartment="isDepartment"></personnel-capacity>
    </el-tab-pane>
    <el-tab-pane label="沟通记录" name="沟通记录">
      <Communicate v-if="activeName === '沟通记录'" ref="communicateRef" :departId="departId" :isDepartment="isDepartment"></Communicate>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import Plan from './components/Plan/index.vue';
import Records from './components/Records/index.vue';
import Communicate from './components/Communicate/index.vue';
import Mandate from './components/Mandate/index.vue';
import PersonnelList from '../../do/a6-personnel-collect/personnel-list.vue';
import PersonnelTraining from '../../do/a6-personnel-training/index.vue';
import JobResponsibilities from '../../do/a6-personnel/job-responsibilities.vue';
import TrainingRecord from '../../do/a6-personnel/training-record.vue';
import PersonnelCapacity from '../../do/a6-personnel/personnel-capacity.vue';
import trackRecord from "../../do/a6-personnel/track-record.vue";
import rewardPunishmentRecord from "../../do/a6-personnel/reward-punishment-record.vue";
import PersonnelInformation from "../../do/a6-personnel/personnel-information.vue";

export default {
  props: {
    clickNodeVal: {
      type: Object,
      default: () => {
        return {};
      }
    },
    departId: {
      type: Number,
      default: 0
    },
    isDepartment: {
      type: Boolean,
      default: false
    },
    isShowAll: {
      type: Boolean,
      default: false
    },
    currentCompaniesList: {
      type: Array,
      default: []
    }
  },
  components: {
    PersonnelInformation,
    rewardPunishmentRecord,
    trackRecord,
    PersonnelCapacity,
    TrainingRecord,
    JobResponsibilities,
    PersonnelTraining,
    PersonnelList,
    Plan,
    Records,
    Communicate,
    Mandate
  },
  watch: {
    departId: {
      handler(newId, oldId) {
        if (newId) {
          switch (this.activeName) {
            case '沟通记录':
              this.$refs.communicateRef.getDepart(newId);
              break;
            case '任职授权记录':
              this.$refs.manDateRef.getDepart(newId);
              break;
            default:
              break;
          }
        }
      }
    }
  },
  data() {
    return {
      activeName: '人员基本信息',
    }
  },
  methods:{
    updatePerson (row) {
      this.$parent.updatePerson(row);
    },
    refreshTree () {
      this.$parent.refreshTree();
    },
  }
};
</script>
<style scoped>
.box {
  height: calc(100vh - 11em);
}

.el-tabs >>> .el-tabs--border-card {
  box-shadow: unset;
  border: unset;
}

.flex_column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>

 src/components/do/a7-Ensure-results-validity/ViewRecord.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,190 @@
<template>
  <div>
    <el-dialog :visible.sync="filesDialogVisible" title="附件上传" width="80%" @closed="closeFilesLook">
      <div style="display: flex;justify-content: space-between;">
        <el-upload ref='upload'
                   :action="fileAction"
                   :auto-upload="true"
                   :before-upload="fileBeforeUpload" :data="{detailsEvaluateId: info.detailsEvaluateId}"
                   :headers="headers" :on-error="onError"
                   :on-success="handleSuccessUp"
                   :show-file-list="false"
                   accept='.jpg,.jpeg,.png,.gif,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.zip,.rar' style="width: 80px !important;">
          <el-button size="small" style="height: 38px" type="primary">附件上传</el-button>
        </el-upload>
      </div>
      <div>
        <ZTTable
          ref="yearTable"
          :column="columnData"
          :height="'calc(100vh - 47em)'"
          :highlightCurrentRow="true"
          :table-data="tableData"
          :table-loading="tableLoading"
          style="margin-top: 0.5em;">
        </ZTTable>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="lookDialogVisible"
      fullscreen
      title="查看附件" width="800px">
      <filePreview v-if="lookDialogVisible" :currentFile="{}"
                   :fileUrl="javaApi+'/word/'+currentInfo.fileUrl" style="height: 90vh;overflow-y: auto;top: 0"/>
    </el-dialog>
  </div>
</template>

<script>
import ZTTable from '../../caorui/ZTTable/index.vue';
import file from '../../../util/file';
import filePreview from '../../tool/file-preview.vue';

export default {
  name: 'ViewRecord',
  // import å¼•å…¥çš„组件需要注入到对象中才能使用
  components: { filePreview, ZTTable },
  data() {
    // è¿™é‡Œå­˜æ”¾æ•°æ®
    return {
      filesDialogVisible: false,
      tableLoading: false,
      filesLookInfo: {},
      columnData: [
        {
          label: '文件名称',
          prop: 'fileName',
          minWidth: '150px'
        },
        {
          dataType: 'action',
          minWidth: '100',
          label: '操作',
          fixed: 'right',
          operation: [
            {
              name: '预览',
              type: 'text',
              clickFun: (row) => {
                this.handleLook(row)
              }
            },
            {
              name: '下载',
              type: 'text',
              clickFun: (row) => {
                this.upload(row)
              }
            },
            {
              name: '删除',
              type: 'text',
              color: '#f56c6c',
              clickFun: (row) => {
                this.delete(row)
              }
            }
          ]
        }
      ],
      tableData: [],
      info: {},
      currentInfo:{},
      lookDialogVisible: false,
    };
  },
  // æ–¹æ³•é›†åˆ
  methods: {
    openDia(row) {
      this.filesDialogVisible = true
      this.info = row
      this.searchTableList()
    },
    // æŸ¥è¯¢é™„件列表
    searchTableList () {
      this.tableLoading = true
      this.$axios.get(this.$api.qualityMonitor.getEvaluateFileList + '?detailsEvaluateId=' + this.info.detailsEvaluateId).then(res => {
        this.tableLoading = false
        if (res.code === 201) return
        this.tableData = res.data
      }).catch(err => {
        this.tableLoading = false
        console.log('err---', err);
      })
    },
    closeFilesLook () {
      this.filesDialogVisible = false
    },
    // ä¸‹è½½
    upload (row) {
      let url = '';
      if(row.type==1){
        url = this.javaApi+'/img/'+row.fileUrl
        file.downloadIamge(url,row.fileName)
      }else{
        url = this.javaApi+'/word/'+row.fileUrl
        const link = document.createElement('a');
        link.href = url;
        link.download = row.fileName;
        link.click();
      }
    },
    // åˆ é™¤
    delete (row) {
      this.tableLoading = true
      this.$axios.get(this.$api.qualityMonitor.delVerifyEvaluateFileList + '?evaluateFileId=' + row.evaluateFileId).then(res => {
        this.tableLoading = false
        if (res.code === 201) return
        this.$message.success('删除成功')
        this.searchTableList()
      }).catch(err => {
        this.tableLoading = false
        console.log('err---', err);
      })
    },
    // ä¸Šä¼ éªŒè¯
    fileBeforeUpload(file) {
      let flag = true
      if (file.size > 1024 * 1024 * 10) {
        this.$message.error('上传文件不超过10M');
        this.$refs.upload.clearFiles()
        flag = false
      }
      if (!flag) {
        return Promise.reject(flag); //正确的终止
      }
    },
    onError(err, file, fileList,type) {
      this.$message.error('上传失败')
      this.$refs.upload.clearFiles()
    },
    handleSuccessUp(response, ) {
      this.upLoading = false;
      if (response.code == 200) {
        this.$message.success('上传成功');
        this.searchTableList()
      }
    },
    // æŸ¥çœ‹æ–‡ä»¶
    handleLook(row){
      this.currentInfo = row
      this.lookDialogVisible = true
    },
  },
  computed: {
    headers() {
      return {
        'token': sessionStorage.getItem('token')
      }
    },
    fileAction() {
      return this.javaApi + this.$api.qualityMonitor.uploadEvaluateFile

    }
  },
};
</script>

<style scoped>

</style>

 src/components/do/a7-Ensure-results-validity/carryOutDialog.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,352 @@
<template>
  <div>
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false"
               :visible.sync="formDia"
               title="实施"
               width="60%" @close="closeCarryOutDia">
      <el-steps :active="currentStep" align-center finish-status="success">
        <el-step title="实施"></el-step>
        <el-step title="批准"></el-step>
      </el-steps>
      <div style="height: 60vh;overflow-y: auto">
        <table border="1" cellspacing="10" class="tables">
          <tr>
            <td class="td-title">
              <p>监控项目：</p>
            </td>
            <td colspan="3">
              <el-input v-if="currentStep == 0" v-model="form.monitorProject"
                        placeholder="请输入内容"
                        size="small">
              </el-input>
              <span v-else class="td-info"> {{ form.monitorProject }}</span>
            </td>
            <td class="td-title">
              <p>监控时间：</p>
            </td>
            <td colspan="3">
              <el-input v-if="currentStep == 0" v-model="form.monitorData"
                        placeholder="请输入内容"
                        size="small">
              </el-input>
              <span v-else class="td-info"> {{ form.monitorData }}</span>
            </td>
          </tr>
          <tr>
            <td colspan="8">
              <div>
                <p>监控目的：</p>
              </div>
              <div>
                <el-input v-if="currentStep == 0" v-model="form.monitorPurpose"
                          :rows="3"
                          placeholder="请输入内容"
                          size="small"
                          type="textarea">
                </el-input>
                <span v-else class="td-info2"> {{ form.monitorPurpose }}</span>
              </div>
            </td>
          </tr>
          <tr>
            <td colspan="8">
              <div>
                <p>监控方法：</p>
              </div>
              <div>
                <el-input v-if="currentStep == 0" v-model="form.monitorMethod"
                          :rows="4"
                          placeholder="请输入内容"
                          size="small"
                          type="textarea">
                </el-input>
                <span v-else class="td-info2"> {{ form.monitorMethod }}</span>
              </div>
            </td>
          </tr>
          <tr>
            <td colspan="8">
              <div>
                <p>参加人员：</p>
              </div>
              <div>
                <el-input v-if="currentStep == 0" v-model="form.participant"
                          :rows="3"
                          placeholder="请输入内容"
                          size="small"
                          type="textarea">
                </el-input>
                <span v-else class="td-info2"> {{ form.participant }}</span>
              </div>
            </td>
          </tr>
          <tr>
            <td colspan="8">
              <div>
                <p>过程控制：</p>
              </div>
              <div>
                <el-input v-if="currentStep == 0" v-model="form.processControl"
                          :rows="3"
                          placeholder="请输入内容"
                          size="small"
                          type="textarea">
                </el-input>
                <span v-else class="td-info2"> {{ form.processControl }}</span>
              </div>
            </td>
          </tr>
          <tr>
            <td colspan="8">
              <div>
                <p>结果评价标准（如何评价）：</p>
              </div>
              <div>
                <el-input v-if="currentStep == 0" v-model="form.howEvaluate"
                          :rows="3"
                          placeholder="请输入内容"
                          size="small"
                          type="textarea">
                </el-input>
                <span v-else class="td-info2"> {{ form.howEvaluate }}</span>
              </div>
            </td>
          </tr>
          <tr>
            <td colspan="8">
              <div>
                <p>经费预算：</p>
              </div>
              <div>
                <el-input v-if="currentStep == 0" v-model="form.budget"
                          placeholder="请输入内容"
                          size="small">
                </el-input>
                <span v-else class="td-info2"> {{ form.budget }}</span>
              </div>
            </td>
          </tr>
          <tr>
            <td colspan="4">
              <div>
                <p>检测部门：</p>
              </div>
              <div>
                <el-input v-if="currentStep == 0" v-model="form.inspectionDepartment"
                          placeholder="请输入内容"
                          size="small">
                </el-input>
                <span v-else class="td-info2"> {{ form.inspectionDepartment }}</span>
              </div>
            </td>
            <td colspan="4">
              <div v-if="currentStep == 0">
                <div>选择批准人：</div>
                <div>
                  <el-select v-if="currentStep == 0" v-model="form.ratifyUserId" clearable
                             filterable
                             placeholder="请选择" size="small">
                    <el-option v-for="(item,i) in personList" :key="i" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                  <span v-else class="td-info2"> {{ form.ratifyName }}</span>
                </div>
              </div>
              <div v-else>
                <div>
                  <p>批准意见：</p>
                </div>
                <div>
                  <el-input v-if="currentStep == 1" v-model="form.ratifyOpinion"
                            :rows="3"
                            placeholder="请输入内容"
                            size="small"
                            type="textarea">
                  </el-input>
                  <span v-if="currentStep == 2" class="td-info2"> {{ form.ratifyOpinion }}</span>
                  <span v-if="currentStep == 2" class="td-info3"> {{ '批准人：' + form.ratifyName }}</span>
                </div>
              </div>
            </td>
          </tr>
        </table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeCarryOutDia">取 æ¶ˆ</el-button>
        <el-button v-if="currentStep != 2" :loading="editLoad" type="primary" @click="handleEdit">提 äº¤</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: 'carryOutDialog',
  // import å¼•å…¥çš„组件需要注入到对象中才能使用
  components: {},
  data() {
    // è¿™é‡Œå­˜æ”¾æ•°æ®
    return {
      formDia: false,
      currentStep: 0,
      form: {
        monitorProject: '',
        monitorData: '',
        monitorPurpose: '',
        monitorMethod: '',
        participant: '',
        processControl: '',
        howEvaluate: '',
        budget: '',
        inspectionDepartment: '',
        ratifyUserId: '',
        ratifyOpinion: '',
        qualityMonitorDetailsId: '',
        ratifyName: '',
      },
      personList: [],
      editLoad: false,
      isCarryOut: false, // æ˜¯å¦ä¸ºå®žæ–½
    };
  },
  // æ–¹æ³•é›†åˆ
  methods: {
    openDia(row) {
      this.formDia = true
      this.searchInfo(row)
      this.getAuthorizedPerson()
    },
    // æŸ¥è¯¢ç›‘控计划详情实施信息
    searchInfo (row) {
      this.$axios.get(this.$api.qualityMonitor.getQualityMonitorRatify + '?qualityMonitorDetailsId=' + row.qualityMonitorDetailsId).then(res => {
        if (res.code === 201) return
        // æœ‰detailsRatifyId则说明提交过实施信息
        if (res.data.detailsRatifyId) {
          // æ˜¯å¦ç»“束0:未结束, 1:已结束
          if (res.data.isFinish == 0) {
            this.currentStep = 1
          } else if (res.data.isFinish == 1) {
            this.currentStep = 2
          }
        } else {
          this.currentStep = 0
        }
        this.form = res.data
      }).catch(err => {
        console.log('err---', err);
      })
    },
    // æäº¤
    handleEdit() {
      this.editLoad = true
      if (this.currentStep == 0) {
        this.addInfo()
      } else {
        this.editInfo()
      }
    },
    // æäº¤å®žæ–½
    addInfo () {
      this.$axios.post(this.$api.qualityMonitor.addQualityMonitorRatify, this.form, {
        headers: {
          "Content-Type": "application/json"
        },
        noQs: true
      }).then(res => {
        this.editLoad = false
        if (res.code === 201) return
        this.$message.success('操作成功')
        this.closeCarryOutDia()
      }).catch(err => {
        console.log('err---', err);
        this.editLoad = false
      })
    },
    // æäº¤æ‰¹å‡†
    editInfo () {
      this.$axios.post(this.$api.qualityMonitor.addQualityMonitorRatifyOpinion, this.form, {
        headers: {
          "Content-Type": "application/json"
        },
        noQs: true
      }).then(res => {
        this.editLoad = false
        if (res.code === 201) return
        this.$message.success('操作成功')
        this.closeCarryOutDia()
      }).catch(err => {
        console.log('err---', err);
        this.editLoad = false
      })
    },
    // å…³é—­å¼¹æ¡†
    closeCarryOutDia () {
      this.formDia = false
      this.$emit('closeCarryOutDia')
    },
    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.personList = data
      })
    },
  }
};
</script>

<style scoped>
>>>.el-dialog {
  margin: 20px auto 50px !important;
}
.tables {
  table-layout: fixed;
  width: 100%;
  margin-top: 10px;
}
.td-title {
  height: 40px;
  width: 100px;
  text-align: center;
  font-size: 14px;
  word-wrap: break-word;
  white-space: normal;
  padding: 6px;
}
.td-info {
  display: inline-block;
  width: 100%;
  text-align: center;
  font-size: 14px;
  word-wrap: break-word;
  white-space: normal;
}
.td-info2 {
  display: inline-block;
  width: 90%;
  text-align: left;
  font-size: 16px;
  word-wrap: break-word;
  white-space: normal;
  margin-left: 20px;
}
.tables td {
  height: 40px;
  width: 100px;
  font-size: 14px;
  word-wrap: break-word;
  white-space: normal;
  padding: 6px;
}
.td-info3 {
  width: 90%;
  display: inline-block;
  text-align: right;
}
</style>

 src/components/do/a7-Ensure-results-validity/detailFormDialog.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,158 @@
<template>
  <div>
    <el-dialog title="编辑" :visible.sync="formDia"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               width="80%" @close="closeDia">
      <el-form :model="form" :rules="rules" ref="form" label-width="140px">
        <el-col :span="12">
          <el-form-item label="监控目的" prop="monitorPurpose">
            <el-input v-model="form.monitorPurpose" size="small" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="计划开展时间" prop="plannedTime">
            <el-input v-model="form.plannedTime" size="small" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="监控项目" prop="monitorProject">
            <el-input v-model="form.monitorProject" size="small" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="参加单位（人员）" prop="participant">
            <el-input v-model="form.participant" size="small" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预算（元）" prop="budget">
            <el-input v-model="form.budget" size="small" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="组织人员" prop="organization">
            <el-input v-model="form.organization" size="small" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="监控方式" prop="monitorWay">
            <el-input v-model="form.monitorWay" size="small" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-form>
      <span slot="footer" class="dialog-footer">
                    <el-button @click="closeDia">取 æ¶ˆ</el-button>
                    <el-button type="primary" @click="submitForm" :loading="upLoad">ç¡® å®š</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'detailFormDialog',
  // import å¼•å…¥çš„组件需要注入到对象中才能使用
  components: {},
  props: ['qualityMonitorId'],
  data() {
    // è¿™é‡Œå­˜æ”¾æ•°æ®
    return {
      formDia: false,
      form: {
        qualityMonitorDetailsId: '',
        monitorPurpose: '',
        plannedTime: '',
        monitorProject: '',
        participant: '',
        budget: '',
        organization: '',
        monitorWay: '',
      },
      rules: {
        monitorPurpose: [{ required: true, message: '请输入监控目的', trigger: 'blur' }],
        monitorProject: [{ required: true, message: '请输入监控项目', trigger: 'blur' }],
      },
      upLoad: false,
      operationType: '',
    };
  },
  // æ–¹æ³•é›†åˆ
  methods: {
    openDia(type, row) {
      this.formDia = true
      this.operationType = type
      if (type === 'edit') {
        this.searchInfo(row)
      }
    },
    searchInfo (row) {
      this.form = {...row}
    },
    // æäº¤è¡¨å•
    submitForm () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.operationType === 'add') {
            this.handleAdd()
          } else {
            this.handleEdit()
          }
        }
      })
    },
    // æäº¤æ–°å¢ž
    handleAdd () {
      let entity = this.HaveJson(this.form)
      entity.qualityMonitorId = this.qualityMonitorId
      this.upLoad = true
      this.$axios.post(this.$api.qualityMonitor.addQualityMonitorDetail, entity, {
        headers: {
          "Content-Type": "application/json"
        },
        noQs: true
      }).then(res => {
        this.upLoad = false
        if (res.code === 201) return
        this.$message.success('新增成功')
        this.closeDia()
      }).catch(err => {
        console.log('err---', err);
        this.upLoad = false
      })
    },
    // æäº¤ä¿®æ”¹
    handleEdit () {
      const entity = this.HaveJson(this.form)
      this.upLoad = true
      this.$axios.post(this.$api.qualityMonitor.updateQualityMonitorDetail, entity, {
        headers: {
          "Content-Type": "application/json"
        },
        noQs: true
      }).then(res => {
        this.upLoad = false
        if (res.code === 201) return
        this.$message.success('修改成功')
        this.closeDia()
      }).catch(err => {
        console.log('err---', err);
        this.upLoad = false
      })
    },
    // å…³é—­å¼¹æ¡†
    closeDia () {
      this.$refs.form.resetFields();
      this.formDia = false
      this.$emit('closeDia')
    },
  }
};
</script>

<style scoped>
>>>.el-dialog__body {
  max-height: 75vh;
  overflow-y: auto;
}
</style>

 src/components/do/a7-Ensure-results-validity/evaluateDialog.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,351 @@
<template>
  <div>
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false"
               :visible.sync="formDia"
               title="质量监控评价"
               width="60%" @close="closeEvaDia">
      <div style="text-align: right">
        <el-button size="small" type="primary" @click="viewTestRecord">附件上传</el-button>
      </div>
      <el-steps :active="currentStep" align-center finish-status="success">
        <el-step title="监控计划实施情况" @click.native="setStep(0)"></el-step>
        <el-step title="监控结果评价" @click.native="setStep(1)"></el-step>
        <el-step title="评审结论（是否采取措施）" @click.native="setStep(2)"></el-step>
      </el-steps>
      <div>
        <table border="1" cellspacing="10" class="tables">
          <tr v-if="showStep === 0">
            <td class="td-title">
              <p><span class="required-span">* </span>评审目的：</p>
            </td>
            <td class="td-info" colspan="3">
              <el-input v-if="showStep === 0 && currentStep === 0" v-model="form.reviewPurpose"
                        placeholder="请输入内容"
                        size="small">
              </el-input>
              <span v-if="showStep === 0 && currentStep !== 0" class="td-info1"> {{ form.reviewPurpose }}</span>
            </td>
          </tr>
          <tr v-if="showStep === 0">
            <td class="td-title">
              <p><span class="required-span">* </span>评审人员：</p>
            </td>
            <td class="td-info" colspan="3">
              <el-input v-if="showStep === 0 && currentStep === 0" v-model="form.reviewUser"
                        placeholder="请输入内容"
                        size="small">
              </el-input>
              <span v-if="showStep === 0 && currentStep !== 0" class="td-info1"> {{ form.reviewUser }}</span>
            </td>
          </tr>
          <tr v-if="showStep === 0">
            <td class="td-title">
              <p><span class="required-span">* </span>评审日期：</p>
            </td>
            <td class="td-info" colspan="3">
              <el-input v-if="showStep === 0 && currentStep === 0" v-model="form.reviewTime"
                        placeholder="请输入内容"
                        size="small">
              </el-input>
              <span v-if="showStep === 0 && currentStep !== 0" class="td-info1"> {{ form.reviewTime }}</span>
            </td>
          </tr>
          <tr v-if="showStep === 0">
            <td class="td-title">
              <p><span class="required-span">* </span>监控计划实施情况：</p>
            </td>
            <td class="td-info" colspan="3">
              <el-input v-if="showStep === 0 && currentStep === 0" v-model="form.implementCondition"
                        :rows="5"
                        placeholder="请输入内容"
                        size="small"
                        type="textarea">
              </el-input>
              <span v-if="showStep === 0 && currentStep !== 0" class="td-info1"> {{ form.implementCondition }}</span>
            </td>
          </tr>
          <tr v-if="showStep === 0">
            <td class="td-title">
              <p>实施部门：</p>
            </td>
            <td class="td-info">
              <span> {{ form.implementDepartment }}</span>
            </td>
            <td v-if="currentStep === 0" class="td-title">
              <p>请选择下一步负责人：</p>
            </td>
            <td v-if="currentStep === 0" class="td-info">
              <el-select v-model="form.implementUserId" clearable filterable
                         placeholder="请选择" size="small">
                <el-option v-for="(item,i) in personList" :key="i" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </td>
          </tr>
          <tr v-if="showStep === 1">
            <td class="td-title">
              <p>监控结果评价：</p>
            </td>
            <td class="td-info" colspan="4">
              <el-input v-if="showStep === 1 && currentStep === 1" v-model="form.implementResult"
                        :rows="5"
                        placeholder="请输入内容"
                        size="small"
                        type="textarea">
              </el-input>
              <span v-if="showStep === 1 && currentStep !== 1" class="td-info1"> {{ form.implementResult }}</span>
            </td>
          </tr>
          <tr v-if="showStep === 1">
            <td class="td-title">
              <p>当前负责人：</p>
            </td>
            <td class="td-info" colspan="4">
              {{form.implementName}}
            </td>
          </tr>
          <tr v-if="showStep === 1">
            <td v-if="currentStep === 1" class="td-title">
              <p>请选择下一步负责人：</p>
            </td>
            <td v-if="currentStep === 1" class="td-info" colspan="4">
              <el-select v-model="form.ratifyUserId" clearable filterable
                         placeholder="请选择" size="small">
                <el-option v-for="(item,i) in personList" :key="i" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </td>
          </tr>
          <tr v-if="showStep === 2">
            <td class="td-title">
              <p>评审结论（是否采取措施）：</p>
            </td>
            <td class="td-info" colspan="4">
              <el-input v-if="showStep === 2 && currentStep === 2" v-model="form.ratifyOpinion"
                        :rows="5"
                        placeholder="请输入内容"
                        size="small"
                        type="textarea">
              </el-input>
              <span v-if="showStep === 2 && currentStep !== 2" class="td-info1"> {{ form.ratifyOpinion }}</span>
            </td>
          </tr>
          <tr v-if="showStep === 2">
            <td class="td-title">
              <p>当前负责人：</p>
            </td>
            <td class="td-info" colspan="4">
              {{form.ratifyUserName}}
            </td>
          </tr>
          <tr v-if="showStep === 2">
            <td class="td-title">
              <p>审批日期：</p>
            </td>
            <td class="td-info" colspan="4">
              {{form.ratifyTime}}
            </td>
          </tr>
        </table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeEvaDia">取 æ¶ˆ</el-button>
        <el-button v-if="currentStep !== 3" :loading="editLoad" type="primary" @click="handleEdit">提 äº¤</el-button>
      </span>
    </el-dialog>
    <view-record v-if="ViewRecord" ref="ViewRecord"></view-record>
  </div>
</template>

<script>
import ViewRecord from '../a7-Ensure-results-validity/ViewRecord.vue';

export default {
  name: 'evaluateDialog',
  // import å¼•å…¥çš„组件需要注入到对象中才能使用
  components: { ViewRecord },
  data() {
    // è¿™é‡Œå­˜æ”¾æ•°æ®
    return {
      formDia: false,
      currentStep: 0,
      showStep: 0,
      form: {
        implementDepartment: '',
        reviewPurpose: '',
        reviewUser: '',
        reviewTime: '',
        implementCondition: '',
        implementName: '',
        implementUserId: '',
        implementResult: '',
        ratifyUserName: '',
        ratifyUserId: '',
        ratifyOpinion: '',
        qualityMonitorDetailsId: '',
        ratifyTime: '',
        detailsEvaluateId: '',
      },
      editLoad: false,
      personList: [],
      ViewRecord: false,
    };
  },
  // æ–¹æ³•é›†åˆ
  methods: {
    openDia (row) {
      this.formDia = true
      this.searchInfo(row)
      this.getAuthorizedPerson()
      this.getDepartment()
    },
    // æŸ¥è¯¢ç›‘控计划详情实施信息
    searchInfo (row) {
      this.form.qualityMonitorDetailsId = row.qualityMonitorDetailsId
      this.$axios.get(this.$api.qualityMonitor.getQualityMonitorEvaluate + '?qualityMonitorDetailsId=' + row.qualityMonitorDetailsId).then(res => {
        if (res.code === 201) return
        if (res.data === null) {
          this.showStep = 0
          this.currentStep = 0
        } else {
          this.form = res.data
          if (res.data.isFinish === 0) {
            if (res.data.implementUserId && !res.data.ratifyUserId) {
              this.showStep = 1
              this.currentStep = 1
            } else if (res.data.implementUserId && res.data.ratifyUserId) {
              this.showStep = 2
              this.currentStep = 2
            }
          } else {
            this.currentStep = 3
            this.showStep = 2
          }
        }
      }).catch(err => {
        console.log('err---', err);
      })
    },
    // æäº¤
    handleEdit () {
      if (this.currentStep === 2) {
        this.$axios.post(this.$api.qualityMonitor.addMonitorEvaluateOpinion, this.form, {
          headers: {
            "Content-Type": "application/json"
          },
          noQs: true
        }).then(res => {
          this.editLoad = false
          if (res.code === 201) return
          this.$message.success('操作成功')
          this.closeEvaDia()
        }).catch(err => {
          console.log('err---', err);
          this.editLoad = false
        })
      } else {
        if (!this.form.reviewPurpose) {
          this.$message.warning('请填写评审目的')
          return
        }
        if (!this.form.reviewUser) {
          this.$message.warning('请填写评审人员')
          return
        }
        if (!this.form.reviewTime) {
          this.$message.warning('请填写评审日期')
          return
        }
        if (!this.form.implementCondition) {
          this.$message.warning('请填写监控计划实施情况')
          return
        }
        if (!this.form.implementUserId) {
          this.$message.warning('请选择下一步负责人')
          return
        }
        if (this.currentStep === 1) {
          if (!this.form.ratifyUserId) {
            this.$message.warning('请选择下一步负责人')
            return
          }
        }
        this.$axios.post(this.$api.qualityMonitor.addQualityMonitorEvaluate, this.form, {
          headers: {
            "Content-Type": "application/json"
          },
          noQs: true
        }).then(res => {
          this.editLoad = false
          if (res.code === 201) return
          this.$message.success('操作成功')
          this.closeEvaDia()
        }).catch(err => {
          console.log('err---', err);
          this.editLoad = false
        })
      }
    },
    // å…³é—­å¼¹æ¡†
    closeEvaDia () {
      this.formDia = false
      this.$emit('closeEvaDia')
    },
    setStep (step) {
      this.showStep = step
    },
    viewTestRecord () {
      this.ViewRecord = true
      this.$nextTick(() => {
        this.$refs.ViewRecord.openDia( this.form)
      })
    },
    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.personList = data
      })
    },
    getDepartment() {
      this.$axios.get(this.$api.user.selectUserDepartmentLimsName).then(res => {
        if (res.code === 201) return
        this.form.implementDepartment = res.data
      })
    },
  }
};
</script>

<style scoped>
.tables {
  table-layout: fixed;
  width: 100%;
  margin-top: 10px;
}
.td-title {
  height: 40px;
  width: 170px;
  text-align: center;
  font-size: 14px;
  word-wrap: break-word;
  white-space: normal;
  padding: 6px;
}
.td-info {
  padding: 6px;
}
.td-info1 {
  display: inline-block;
  width: 100%;
  text-align: left;
  font-size: 14px;
  word-wrap: break-word;
  white-space: normal;
}
</style>

 src/components/view/a7-Ensure-results-validity.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,668 @@
<template>
  <!--  7.7质量监控计划-->
  <div>
    <div class="table-card">
      <TableCard title="年度计划表">
        <template v-slot:form>
          <div class="items_center">
            <span>计划名称：</span>
            <el-input v-model="yearForm.monitorName" class="search" placeholder="请输入"
                      size="small"></el-input>
            <el-button size="small" type="primary" @click="getYearPlanList">查询</el-button>
            <el-button size="small" @click="clearYear">重置</el-button>
          </div>
          <div>
            <el-upload ref='upload' :action="action"
                       :before-upload="beforeUpload" :headers="headers" :on-error="onError"
                       :on-success="handleSuccessUp" :show-file-list="false" accept='.jpg,.jpeg,.png,.gif,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.zip,.rar'>
              <el-button :loading="upLoading" size="small" type="primary">导入</el-button>
            </el-upload>
          </div>
        </template>
        <template v-slot:table>
          <ZTTable
            ref="yearTable"
            :column="yearColumnData"
            :height="'25vh'"
            :highlightCurrentRow="true"
            :rowClick="rowClick"
            :table-data="yearTableData"
            :table-loading="yearLoading"
            style="margin-top: 0.5em;padding: 0 15px;"
          >
          </ZTTable>
          <el-divider></el-divider>
          <!-- åˆ†é¡µ -->
          <div class="pagination">
            <div></div>
            <el-pagination :page-size="yearPage.size" :page-sizes="[10, 20, 30, 40]"
                           :total="yearPage.total" layout="total, sizes, prev, pager, next, jumper"
                           @current-change="handleYearCurrent" @size-change="handleYearSizeChange">
            </el-pagination>
          </div>
        </template>
      </TableCard>
    </div>
    <div  class="table-card">
      <TableCard title="年度计划明细表">
        <template v-slot:form>
          <div class="items_center">
            <span>监控目的：</span>
            <el-input v-model="yearDetailForm.monitorPurpose" class="search" placeholder="请输入" size="small"></el-input>
            <span>监控项目：</span>
            <el-input v-model="yearDetailForm.monitorProject" class="search" placeholder="请输入" size="small"></el-input>
            <el-button size="small" type="primary" @click="getYearDetailPlanList">查询</el-button>
            <el-button size="small" @click="clearDetail">重置</el-button>
          </div>
          <div>
            <el-button size="small" type="primary" @click="showDialog('add')">新增</el-button>
          </div>
        </template>
        <template v-slot:table>
          <ZTTable :column="yearDetailColumnData" :height="'25vh'" :table-data="yearDetailTableData"
                   :table-loading="yearDetailLoading" style="margin-top: 18px; padding: 0 15px;">
          </ZTTable>
          <el-divider></el-divider>
          <!-- åˆ†é¡µ -->
          <div class="pagination">
            <div></div>
            <el-pagination :page-size="yearDetailPage.size" :page-sizes="[10, 20, 30, 40]"
                           :total="yearDetailPage.total" layout="total, sizes, prev, pager, next, jumper"
                           @current-change="handleYearDetailCurrent" @size-change="handleYearDetailSizeChange">
            </el-pagination>
          </div>
        </template>
      </TableCard>
    </div>
    <!--新增修改弹框-->
    <detail-form-dialog v-if="formDia" ref="formDia" :qualityMonitorId="qualityMonitorId" @closeDia="closeDia"></detail-form-dialog>
    <!--实施流程弹框-->
    <carry-out-dialog v-if="carryOutDia" ref="carryOutDia" :qualityMonitorId="qualityMonitorId" @closeDia="closeCarryOutDia"></carry-out-dialog>
    <!--评价流程弹框-->
    <evaluate-dialog v-if="evaluateDialog" ref="evaluateDialog" @closeEvaDia="closeEvaDia"></evaluate-dialog>
    <el-dialog :visible.sync="examineDialog" title="审核" width="30%" @close="closeExamineDia">
      <span>
        å®¡æ ¸å¤‡æ³¨ï¼š
        <el-input v-model="examineInfo.examineRemark" type="textarea"></el-input>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button :loading="examineLoading" @click="handleReview(0)">不通过</el-button>
        <el-button :loading="examineLoading" type="primary" @click="handleReview(1)">通 è¿‡</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="ratifyDialog" title="批准" width="30%" @close="closeRatifyDia">
      <span>
        æ‰¹å‡†å¤‡æ³¨ï¼š
        <el-input v-model="ratifyInfo.ratifyRemark" type="textarea"></el-input>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button :loading="ratifyLoading" @click="handleRatify(0)">不批准</el-button>
        <el-button :loading="ratifyLoading" type="primary" @click="handleRatify(1)">批 å‡†</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import UploadExcel from '../caorui/Department/components/Plan/UploadExcel.vue';
import TableCard from '../caorui/TableCard/index.vue';
import ZTTable from '../caorui/ZTTable/index.vue';
import DetailFormDialog from '../do/a7-Ensure-results-validity/detailFormDialog.vue';
import CarryOutDialog from '../do/a7-Ensure-results-validity/carryOutDialog.vue';
import EvaluateDialog from '../do/a7-Ensure-results-validity/evaluateDialog.vue';
import fileDownload from "../../util/file";

export default {
  name: 'a7-Ensure-results-validity',
  // import å¼•å…¥çš„组件需要注入到对象中才能使用
  components: { EvaluateDialog, CarryOutDialog, DetailFormDialog, ZTTable, TableCard, UploadExcel },
  data() {
    // è¿™é‡Œå­˜æ”¾æ•°æ®
    return {
      yearForm: {
        monitorName: '',
      },
      yearPage: {
        current: 1,
        size: 20,
        total: 0
      },
      yearColumnData: [
        {
          label: '计划名称',
          prop: 'monitorName',
          minWidth: '150px'
        }, {
          label: '编制人',
          prop: 'writeName',
          minWidth: '100'
        }, {
          label: '编制日期',
          prop: 'writeTime',
          minWidth: '160'
        }, {
          dataType: 'tag',
          label: '审核状态',
          prop: 'examineStatus',
          minWidth: '100',
          formatData: (params) => {
            if (params === 0) {
              return '不通过';
            } else if (params === 1) {
              return '通过';
            } else {
              return null;
            }
          },
          formatType: (params) => {
            if (params === 0) {
              return 'danger';
            } else if (params === 1) {
              return 'success';
            } else {
              return null;
            }
          }
        }, {
          label: '审核内容',
          prop: 'examineRemark',
          minWidth: '100'
        }, {
          label: '审核人',
          prop: 'examineName',
          minWidth: '100'
        }, {
          label: '审核日期',
          prop: 'examineTime',
          minWidth: '160'
        },{
          dataType: 'tag',
          label: '批准状态',
          prop: 'ratifyStatus',
          minWidth: '100',
          formatData: (params) => {
            if (params === 0) {
              return '不批准';
            } else if (params === 1) {
              return '批准';
            } else {
              return null;
            }
          },
          formatType: (params) => {
            if (params === 0) {
              return 'danger';
            } else if (params === 1) {
              return 'success';
            } else {
              return null;
            }
          }
        },{
          label: '批准内容',
          prop: 'ratifyRemark',
          minWidth: '100'
        },{
          label: '批准人',
          prop: 'ratifyName',
          minWidth: '100'
        },{
          label: '批准日期',
          prop: 'ratifyTime',
          minWidth: '160'
        }, {
          label: '创建日期',
          prop: 'createTime',
          minWidth: '160'
        }, {
          label: '创建人',
          prop: 'createUser',
          minWidth: '100'
        }, {
          dataType: 'action',
          minWidth: '200',
          label: '操作',
          fixed: 'right',
          operation: [
            {
              name: '审核',
              type: 'text',
              disabled: (row) => {
                if (row.examineStatus === 1) {
                  return true
                } else {
                  return false
                }
              },
              clickFun: (row) => {
                this.examinePlan(row)
              }
            },
            {
              name: '批准',
              type: 'text',
              disabled: (row) => {
                if (row.ratifyStatus === 1 || row.examineStatus !== 1) {
                  return true
                } else {
                  return false
                }
              },
              clickFun: (row) => {
                this.approvalPlan(row)
              }
            },
            {
              name: '导出',
              type: 'text',
              clickFun: (row) => {
                this.handleDown(row)
              }
            },
            {
              name: '删除',
              type: 'text',
              color: '#f56c6c',
              clickFun: (row) => {
                this.delPlan(row)
              }
            }
          ]
        }],
      yearTableData: [],  // å¹´è¡¨
      yearLoading: false,
      yearDetailForm: {
        monitorPurpose: '',
        monitorProject: ''
      },
      yearDetailColumnData: [
        {
          label: '监控目的',
          prop: 'monitorPurpose',
          width: '150px',
          showOverflowTooltip: true,
        }, {
          label: '计划开展时间',
          prop: 'plannedTime',
          minWidth: '150px'
        }, {
          label: '监控项目',
          prop: 'monitorProject',
          minWidth: '150px'
        }, {
          label: '参加单位（人员）',
          prop: 'participant',
          minWidth: '150px'
        }, {
          label: '预算（元）',
          prop: 'budget',
          minWidth: '150px'
        },{
          label: '组织人员',
          prop: 'organization',
          minWidth: '150px'
        },{
          label: '监控方式',
          prop: 'monitorWay',
          minWidth: '150px'
        }, {
          dataType: 'action',
          width: '180',
          label: '操作',
          fixed: 'right',
          operation: [
            {
              name: '编辑',
              type: 'text',
              clickFun: (row) => {
                this.showDialog('edit', row)
              }
            },
            {
              name: '实施',
              type: 'text',
              clickFun: (row) => {
                this.carryOut(row)
              }
            },
            {
              name: '评价',
              type: 'text',
              clickFun: (row) => {
                this.evaluate(row)
              }
            },
            {
              name: '删除',
              type: 'text',
              color: '#f56c6c',
              clickFun: (row) => {
                this.delYearPlanDetail(row)
              }
            }
          ]
        }
      ],
      yearDetailTableData: [], // å¹´æ˜Žç»†è¡¨
      yearDetailLoading: false,
      yearDetailPage: {
        current: 1,
        size: 20,
        total: 0
      },
      formDia: false,
      qualityMonitorId: '',
      carryOutDia: false,
      evaluateDialog: false,
      examineDialog: false,
      examineLoading: false,
      ratifyDialog: false,
      ratifyLoading: false,
      examineInfo: {},
      ratifyInfo: {},
      upLoading: false,
    };
  },
  mounted() {
    this.getYearPlanList()
  },
  // æ–¹æ³•é›†åˆ
  methods: {
    // æŸ¥è¯¢å¹´åº¦è®¡åˆ’表
    getYearPlanList () {
      const entity = {
        monitorName: this.yearForm.monitorName,
      }
      const page = this.yearPage
      this.yearLoading = true
      this.$axios.post(this.$api.qualityMonitor.pageQualityMonitor, { entity, page }, {
        headers: {
          "Content-Type": "application/json"
        },
        noQs: true
      }).then(res => {
        this.yearLoading = false
        if (res.code === 201) return
        this.yearTableData = res.data.records
        this.yearPage.total = res.data.total
        if (this.yearTableData.length > 0) {
          this.rowClick(this.yearTableData[0])
        }
      }).catch(err => {
        console.log('err---', err);
        this.yearLoading = false
      })
    },
    clearYear () {
      this.yearForm.monitorName = ''
      this.getYearPlanList()
    },
    // å¯¼å…¥æµç¨‹
    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.getYearPlanList()
      }
    },
    // å®¡æ ¸
    examinePlan (row) {
      this.examineDialog = true
      this.examineInfo = row
    },
    handleReview (examineStatus) {
      // å®¡æ ¸çŠ¶æ€ , 0 ä¸é€šè¿‡, 1通过
      this.examineInfo.examineStatus = examineStatus
      this.examineLoading = true
      this.$axios.post(this.$api.qualityMonitor.examineQualityMonitor, this.examineInfo, {
        headers: {
          "Content-Type": "application/json"
        },
        noQs: true
      }).then(res => {
        this.examineLoading = false
        if (res.code === 201) return
        this.$message.success('操作成功')
        this.closeExamineDia()
      }).catch(err => {
        console.log('err---', err);
        this.examineLoading = false
      })
    },
    closeExamineDia () {
      this.examineDialog = false
      this.examineInfo.examineRemark = ''
      this.getYearPlanList()
    },
    // æ‰¹å‡†
    approvalPlan (row) {
      this.ratifyDialog = true
      this.ratifyInfo = row
    },
    handleRatify (ratifyStatus) {
      // æ‰¹å‡†çŠ¶æ€ , 0 ä¸é€šè¿‡, 1通过
      this.ratifyInfo.ratifyStatus = ratifyStatus
      this.ratifyLoading = true
      this.$axios.post(this.$api.qualityMonitor.ratifyQualityMonitor, this.ratifyInfo, {
        headers: {
          "Content-Type": "application/json"
        },
        noQs: true
      }).then(res => {
        this.ratifyLoading = false
        if (res.code === 201) return
        this.$message.success('操作成功')
        this.closeRatifyDia()
      }).catch(err => {
        console.log('err---', err);
        this.ratifyLoading = false
      })
    },
    closeRatifyDia () {
      this.ratifyDialog = false
      this.ratifyInfo.ratifyRemark = ''
      this.getYearPlanList()
    },
    // å¯¼å‡º
    handleDown (row) {
      this.$axios.get(this.$api.qualityMonitor.exportQualityMonitorDetail + '?qualityMonitorId=' + row.qualityMonitorId,{responseType: "blob"}).then(res => {
        this.outLoading = false
        this.$message.success('导出成功')
        const blob = new Blob([res],{ type: 'application/msword' });
        const url = URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = row.monitorName + '.docx';
        link.click();
      })
    },
    // åˆ é™¤è¿›åº¦è®¡åˆ’表
    delPlan (row) {
      this.$confirm('此操作将永久删除该数据, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.yearLoading = true
        this.$axios.get(this.$api.qualityMonitor.delQualitySupervise + '?qualityMonitorId=' + row.qualityMonitorId).then(res => {
          this.yearLoading = false
          if (res.code === 201) return
          this.$message.success('删除成功')
          this.getYearPlanList()
        }).catch(err => {
          this.yearLoading = false
          console.log('err---', err);
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // å¹´åº¦è®¡åˆ’表格，点击行数据后刷新详情
    rowClick(row) {
      this.qualityMonitorId = row.qualityMonitorId
      this.getYearDetailPlanList()
    },
    // èŽ·å–年度明细表
    getYearDetailPlanList () {
      const entity = {
        qualityMonitorId: this.qualityMonitorId,
        monitorPurpose: this.yearDetailForm.monitorPurpose,
        monitorProject: this.yearDetailForm.monitorProject,
      }
      const page = this.yearDetailPage
      this.yearDetailLoading = true
      this.$axios.post(this.$api.qualityMonitor.pageQualityMonitorDetail, { entity, page }, {
        headers: {
          "Content-Type": "application/json"
        },
        noQs: true
      }).then(res => {
        this.yearDetailLoading = false
        if (res.code === 201) return
        this.yearDetailTableData = res.data.records
        this.yearDetailPage.total = res.data.total
      }).catch(err => {
        console.log('err---', err);
        this.yearDetailLoading = false
      })
    },
    // é‡ç½®æ˜Žç»†è¡¨
    clearDetail () {
      this.yearDetailForm = {
        monitorPurpose: '',
        monitorProject: ''
      }
      this.getYearDetailPlanList()
    },
    // æ˜Žç»†è¡¨å®žæ–½
    carryOut (row) {
      this.carryOutDia = true
      this.$nextTick(() => {
        this.$refs.carryOutDia.openDia(row)
      })
    },
    closeCarryOutDia () {
      this.carryOutDia = false
      this.getYearDetailPlanList()
    },
    // æ‰“开评价弹框
    evaluate (row) {
      this.evaluateDialog = true
      this.$nextTick(() => {
        this.$refs.evaluateDialog.openDia(row)
      })
    },
    closeEvaDia () {
      this.evaluateDialog = false
      this.getYearDetailPlanList()
    },
    // æ‰“开年度明细新增、修改弹框
    showDialog (type, row) {
      this.formDia = true
      this.$nextTick(() => {
        this.$refs.formDia.openDia(type, row)
      })
    },
    closeDia () {
      this.formDia = false
      this.getYearDetailPlanList()
    },
    delYearPlanDetail (row) {
      this.$confirm('此操作将永久删除该数据, æ˜¯å¦ç»§ç»­?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.yearDetailLoading = true
        this.$axios.get(this.$api.qualityMonitor.delQualityMonitorDetail + '?qualityMonitorDetailsId=' + row.qualityMonitorDetailsId).then(res => {
          this.yearDetailLoading = false
          if (res.code === 201) return
          this.$message.success('删除成功')
          this.getYearDetailPlanList()
        }).catch(err => {
          this.yearDetailLoading = false
          console.log('err---', err);
        })
      })
    },
    // å¹´è®¡åˆ’分页
    handleYearCurrent(page) {
      this.yearPage.current = page
      this.getYearPlanList()
    },
    handleYearSizeChange(size) {
      this.yearPage.size = size
      this.getYearPlanList()
    },
    // å¹´æ˜Žç»†è®¡åˆ’分页
    handleYearDetailCurrent(page) {
      this.yearDetailPage.current = page
      this.getYearDetailPlanList()
    },
    handleYearDetailSizeChange(size) {
      this.yearDetailPage.size = size
      this.getYearDetailPlanList()
    },
  },
  // ç”¨äºŽä¸Šä¼ æ–‡ä»¶çš„信息
  computed: {
    headers() {
      return {
        'token': sessionStorage.getItem('token')
      }
    },
    action() {
      return this.javaApi + this.$api.qualityMonitor.importQualityMonitor
    }
  },
};
</script>

<style scoped>
.table-card {
  background-color: #ffffff;
}
.flex_column {
  display: flex;
  height: 80vh;
  flex-direction: column;
  overflow: auto;
  justify-content: space-between;
}

.pagination {
  display: flex;
  justify-content: space-between
}

.items_center {
  display: flex;
  align-items: center;
}

.date_box {
  margin: 0 5px;
}

.search {
  width: 150px;
  padding: 0 16px;
}
</style>