新增页面

Admin

2022-11-08 ccaa5f7b43b39e2e875b4f999832675cb87f116a

新增页面

 package.json

@@ -38,6 +38,7 @@
    "driver.js": "0.8.1",
    "dropzone": "5.2.0",
    "echarts": "4.1.0",
    "element-china-area-data": "^5.0.2",
    "element-ui": "2.14.1",
    "event-source-polyfill": "^1.0.5",
    "eventsource-polyfill": "^0.9.6",

 src/router/index.js

@@ -123,8 +123,19 @@
        component: () => import('@/views/dashboard/index'),
        name: 'Dashboard1',
        meta: { title: '首页', icon: 'el-icon-dash', noCache: true, affix: true }
      }

      },
        {
            path: 'specialCheck',
            component: () => import('@/views/specialCheck/index'),
            name: 'specialCheck',
            meta: { title: '专项检查', icon: 'el-icon-dash', noCache: true, affix: true }
        },
        {
            path: 'selfCheck',
            component: () => import('@/views/selfCheck/index'),
            name: 'selfCheck',
            meta: { title: '专项自查', icon: 'el-icon-dash', noCache: true, affix: true }
        }
    ],
    hidden: true
  },
@@ -155,7 +166,7 @@
            }
        ],
        hidden: true
    },
    }
]

export default new Router({

 src/styles/index.scss

@@ -147,7 +147,9 @@
.text-center {
  text-align: center
}

.m-color {
    color: #034EA2;
}
.sub-navbar {
  height: 50px;
  line-height: 50px;
@@ -221,5 +223,5 @@
      background-color:#F1F4F7;
    }
  }
 
}

}

 src/styles/variables.scss

@@ -7,6 +7,7 @@
$tiffany: #4AB7BD;
$yellow:#FEC171;
$panGreen: #30B08F;
$main: #034EA2;

//sidebar
$menuText:#bfcbd9;

 src/views/selfCheck/components/repair.vue

对比新文件
@@ -0,0 +1,235 @@
<template>
    <el-dialog
        :visible.sync="dialogVisible"
        append-to-body
        :close-on-click-modal="false"
        width="60%"
        center
    >
        <div class="table_cont">

            <el-table
                v-loading="listLoading"
                :key="tableKey"
                :data="checkList"
                border
                fit
                highlight-current-row
                style="width: 100%;"
            >

                <el-table-column type="index" label="序号" align="center" width="80"/>

                <el-table-column label="检查出的隐患问题" prop="info" align="center" width="180">
                    <template slot-scope="scope">
                        <span>{{ scope.row.info }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="检查时间" prop="checkTime" align="center">
                    <template slot-scope="scope">
                        <span>{{scope.row.checkTime}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="最后整改期限" prop="deadline" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.deadline }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="整改资金（元）" prop="money" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.money }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="整改措施" prop="action" width="130" align="center" sortable>
                    <template slot-scope="scope">
                        <span>{{ scope.row.action }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="负责人" prop="principal" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.principal }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="整改状态" prop="fixStatus" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.fixStatus ==0?'未整改':'已整改' }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="完成整改时间" prop="finishTime" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.finishTime }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="隐患等级" prop="level" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.level==0 ? '一般隐患' : '重大隐患' }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.fixStatus==0" type="text" @click="toFix(scope.row)">整改填报</el-button>
                        <el-button v-else type="text">--</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                v-show="recordTotal>0"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="pageSize"
                :total="recordTotal"
                layout="total, sizes, prev, pager, next, jumper"
                background
                style="float:right;margin:3px"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirm()">提交</el-button>
        </span>
        <el-dialog
            :visible.sync="dialogFix"
            title="整改填报"
            append-to-body
            :close-on-click-modal="false"
            width="40%"
            center
        >
            <el-form ref="fixformRef" :model="fixForm" label-width="140px">
                <el-form-item label="当前隐患：">
                    <el-input type="textarea" v-model="fixForm.info"></el-input>
                </el-form-item>

                <el-form-item label="当前完成整改日期：">
                    <el-date-picker
                        v-model="fixForm.finishDate"
                        type="date"
                        placeholder="请选择整改日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="整改资金：">
                    <el-input v-model="fixForm.money"></el-input>
                </el-form-item>
                <el-form-item label="整改措施：">
                    <el-input type="textarea" autosize v-model="fixForm.actions"></el-input>
                </el-form-item>
                <el-form-item label="负责人：">
                    <el-input v-model="fixForm.name"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogFix = false">取消</el-button>
              <el-button type="primary" @click="confirmFix()">提交</el-button>
            </span>
        </el-dialog>
    </el-dialog>

</template>

<script>
    import {computePageCount} from "@/utils";

    export default {
        name: "repair",
        data(){
            return{
                listLoading: false,
                dialogFix: false,
                recordTotal: 0,
                pageSize: 10,
                pageTotal: 0,
                currentPage: 1,
                tableKey: 0,
                dialogVisible:false,
                checkList:[
                    {
                        info: '虫吃鼠咬',
                        checkTime: '2022-10-31',
                        deadline: '2022-11-01',
                        money: '30',
                        action: '补充灭虫药',
                        principal: '叼毛',
                        fixStatus: 1,
                        finishTime: '2022-11-01',
                        level: 1
                    },
                    {
                        info: '虫吃鼠咬',
                        checkTime: '2022-10-31',
                        deadline: '2022-11-01',
                        money: '3000',
                        action: '补充灭虫药',
                        principal: '叼毛',
                        fixStatus: 0,
                        finishTime: '2022-11-01',
                        level: 0
                    }
                ],
                fixForm:{
                    info: '',
                    finishDate: '',
                    money: '',
                    actions: '',
                    name: ''
                }
            }
        },
        watch: {
        },
        methods:{
            handleSizeChange: function (val) {
                this.pageSize = val
                this.currentPage = 1
                // this.getDataList()
            },
            handleCurrentChange: function (val) {
                this.currentPage = val
                // this.getDataList()
            },


            confirm(){
                this.dialogVisible = false
            },

            confirmFix(){
                this.dialogFix = false
            },

            toFix(){
                this.dialogFix = true
            }
        },
    }
</script>

<style lang="scss" scoped>
    .input-with-select .el-select {
        width: 120px;
    }

    .el-date-editor.el-input{
        width: 100%;
    }

    .el-divider__text{
        background-color: #fafafa;
        color: #034EA2;
    }

    .table_cont{
        width: 100%;
    }
</style>

 src/views/selfCheck/components/selfReport.vue

对比新文件
@@ -0,0 +1,262 @@
<template>
    <el-dialog
        :visible.sync="dialogVisible"
        append-to-body
        :close-on-click-modal="false"
        width="60%"
        center
    >
        <div class="company-info">
            <div>企业基本信息</div>
            <div><span>企业名称：</span><span>XXXXXXXXXX有限公司</span></div>
            <div><span>许可证：</span><span>在有效期（有效期至：XXXXX）</span></div>
            <div><span>库存：</span><span>100(万箱)</span></div>
            <div><span>库容：</span>
                <span>
                    <el-input placeholder="请输入库容量" v-model="checkForm.store"></el-input>
                </span>
            </div>
        </div>
        <el-divider/>
        <div class="form-info">
            <div>自查自改填报</div>
            <div>
                <span>自查是否有隐患：</span>
                <el-radio-group v-model="checkForm.isRisky">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="2">否</el-radio>
                </el-radio-group>
            </div>
        </div>
        <div class="risk-list" v-if="checkForm.isRisky==1">
            <table class="risk-table">
                <th><span>序号</span><span>检查出的隐患问题</span><span>检查时间</span><span>最后整改期限</span><span>隐患等级</span><span>操作</span></th>
                <tr v-for="(item,index) in checkForm.riskList">
                    <td class="num">{{index + 1}}</td>
                    <td class="info"><el-input type="textarea" :rows="1" placeholder="请输入内容" v-model="item.info"></el-input></td>
                    <td class="date"><el-date-picker v-model="item.time" type="datetime" placeholder="选择检查时间"></el-date-picker></td>
                    <td class="deadline"><el-date-picker v-model="item.deadline" type="datetime" placeholder="选择整改期限"></el-date-picker></td>
                    <td class="level">
                        <el-radio-group v-model="item.level">
                            <el-radio :label="1">一般隐患</el-radio>
                            <el-radio :label="2">重大隐患</el-radio>
                        </el-radio-group>
                    </td>
                    <td class="edit">
                        <el-button type="text" @click="deleteItem(index)">删除</el-button>
                    </td>
                </tr>
            </table>
            <div class="addBtn">
                <el-button type="primary" plain icon="el-icon-plus" @click="addItem()">新增隐患问题</el-button>
            </div>

        </div>
        <div style="display: flex;align-items: center;margin-top: 20px">
            <span>填报人：</span>
            <span style="margin-right: 40px">
                <el-input v-model="checkForm.reporter"></el-input>
            </span>
            <span>电话号码：</span>
            <span>
                <el-input v-model="checkForm.reportPhone"></el-input>
            </span>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmSend()">提交</el-button>
        </span>
    </el-dialog>
</template>

<script>
    import {computePageCount} from "@/utils";

    export default {
        name: "selfReport",
        data(){
            return{
                dialogVisible:false,
                checkForm:{
                    store: '',
                    isRisky: 2,
                    riskList: [
                        {
                            info: '',
                            time: '',
                            deadline: '',
                            level: ''
                        }
                    ],
                    reporter: '',
                    reportPhone: ''
                },
            }
        },
        watch: {
        },
        methods:{
            addItem(){
                const newItem = {
                    info: '',
                    time: '',
                    level: ''
                }
                this.checkForm.riskList.push(newItem)
            },
            deleteItem(i){
                console.log(i)
                this.checkForm.riskList.splice(i,1)
            },
            confirmSend(){
                this.dialogVisible = false
            }
        },
    }
</script>

<style lang="scss" scoped>
    .input-with-select .el-select {
        width: 120px;
    }

    .el-date-editor.el-input{
        width: 100%;
    }

    .el-divider__text{
        background-color: #fafafa;
        color: #034EA2;
    }

    .company-info{
        margin-bottom: 20px;
        &>div{
            width: 100%;
            margin-bottom: 10px;
            padding-left: 15px;
            span{
                display: inline-block;
                &:first-of-type{
                    width: 15%;
                }
            }
        }
        &>div:first-of-type{
            font-size: 18px;
            font-weight: bolder;
            padding-left: 0;
        }
    }
    .form-info{
        display: flex;
        align-items: center;
        &>div{
            margin-bottom: 10px;
            margin-right: 40px;
            display: flex;
            align-items: center;
        }
        &>div:first-of-type{
            font-size: 18px;
            font-weight: bolder;
            padding-left: 0;
        }
    }
    .risk-list{
        .risk-table{
            width: 100%;
            border-collapse: collapse;
            border: 1px solid #ccc;
            margin: 10px 0;
            th{
                width: 100%;
                display: flex;
                border-bottom: 1px solid #ccc;
                align-items: center;

                span{
                    height: 100%;
                    padding: 10px 0;
                    border-right: 1px solid #ccc;
                    box-sizing: border-box;

                    &:nth-of-type(1){
                        width: 5%;
                        border-left: none
                    }
                    &:nth-of-type(2){
                        width: 25%;
                    }
                    &:nth-of-type(3){
                        width: 20%;
                    }
                    &:nth-of-type(4){
                        width: 20%;
                    }
                    &:nth-of-type(5){
                        width: 20%;
                    }
                    &:nth-of-type(6){
                        width: 10%;
                        border-right: none;
                    }
                }
            }
            tr{
                width: 100%;
                height: 44px;
                line-height: 42px;
                border-bottom: 1px solid #ccc;

                &:last-of-type{
                    border-bottom: none;
                }

                td{
                    border-right: 1px solid #ccc;
                    display: inline-block;
                    height: 44px;
                    vertical-align: middle;
                    text-align: center;
                    line-height: 42px;
                    &:last-of-type{
                        border-right: none;
                    }
                }
                .num{
                    width: 5%
                }
                .info{
                    width: 25%;

                    ::v-deep.el-textarea{
                        .el-textarea__inner{
                            min-height: 40px !important;
                        }
                    }
                }
                .date{
                    width: 20%;
                }
                .deadline{
                    width: 20%;
                }
                .level{
                    width: 20%;

                    .el-radio{
                        margin-right: 15px;
                    }
                }
                .edit{
                    width: 10%;
                }
            }
        }
    }
    .addBtn{
        display: flex;
        justify-content: center;
    }
</style>

 src/views/selfCheck/index.vue

对比新文件
@@ -0,0 +1,173 @@
<template>
    <div class="app-container" style="padding-bottom:40px">
        <div class="table_content">
            <el-table
                v-loading="listLoading"
                :key="tableKey"
                :data="checkData"
                border
                fit
                highlight-current-row
                style="width: 100%;"
            >

                <el-table-column label="下发日期" prop="sendDate" align="center" width="180">
                    <template slot-scope="scope">
                        <span>{{ scope.row.sendDate }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="任务名称" prop="name" align="center">
                    <template slot-scope="scope">
                        <span>{{scope.row.name}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="下发部门" prop="department" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.department }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="自查期限（之前）" prop="deadline" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.deadline }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="是否自查" prop="isCheck" width="130" align="center" sortable>
                    <template slot-scope="scope">
                        <span>{{ scope.row.isCheck }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="自查时间" prop="selfCheckTime" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.selfCheckTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="是否隐患" prop="isRisky" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.isRisky }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="整改情况" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button type="text" @click="toRepair(scope.row)">去整改</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="详情" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.isCheck == 1" type="text">查看详情</el-button>
                        <el-button v-else type="text" @click="toReport(scope.row)">自查填报</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                v-show="recordTotal>0"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="pageSize"
                :total="recordTotal"
                layout="total, sizes, prev, pager, next, jumper"
                background
                style="float:right;margin:3px"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
        <self-report ref="report"></self-report>
        <repair ref="repair"></repair>
    </div>
</template>

<script>
    import Cookies from 'js-cookie'
    import {computePageCount} from "../../utils";
    import {mapGetters} from "vuex";
    import {MessageBox} from 'element-ui'
    import { getToken } from '@/utils/auth'
    import selfReport from "./components/selfReport";
    import repair from "./components/repair";

    export default {
        name: "selfCheck",
        components:{
            selfReport,
            repair
        },
        data() {
            return {
                listLoading: false,
                recordTotal: 0,
                pageSize: 10,
                pageTotal: 0,
                currentPage: 1,
                tableKey: 0,
                checkData: [
                    {
                        sendDate: '2022-10-29',
                        name: '2023年上半年……',
                        department: '新疆维吾尔应急管理厅',
                        deadline: '2022-10-30',
                        isCheck: 1,
                        selfCheckTime: '2022-10-31',
                        isRisky: 1
                    },
                    {
                        sendDate: '2022-10-29',
                        name: '2023年上半年……',
                        department: '新疆维吾尔应急管理厅',
                        deadline: '2022-10-30',
                        isCheck: 0,
                        selfCheckTime: '2022-10-31',
                        isRisky: 0
                    }
                ]
            }
        },
        created() {

        },
        mounted() {

        },
        computed: {
            ...mapGetters([
                'userType',
                'name'
            ])
        },
        methods: {
            handleSizeChange: function (val) {
                this.pageSize = val
                this.currentPage = 1
                // this.getDataList()
            },
            handleCurrentChange: function (val) {
                this.currentPage = val
                // this.getDataList()
            },

            toReport(row){
                const t = this
                t.$refs.report.dialogVisible = true
            },

            toRepair(row){
                const t = this
                t.$refs.repair.dialogVisible = true
            },
        }
    }
</script>

<style lang="scss" scoped>
    .app-container{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;

        .table_content{
            width: 100%;
        }
    }
</style>

 src/views/specialCheck/components/feedbackDetails.vue

对比新文件
@@ -0,0 +1,702 @@
<template>
    <el-dialog
        :visible.sync="dialogVisible"
        append-to-body
        :close-on-click-modal="false"
        width="75%"
        center
    >
         <div slot="title" class="dialog-title">
            <span></span>
            <div class="">烟花爆竹批发企业检查情况反馈表</div>
            <span>
                <el-button type="primary">查看企业自查表</el-button>
            </span>
         </div>
        <div class="feed-report">
            <div class="feed-tit">
                <div>企业名称: <span class="m-color">沙湾市国华商贸有限公司</span></div>
                <div>所属省市县: <span class="m-color">新疆维吾尔自治区塔城地区沙湾县</span></div>
                <div>检查层级: <span class="m-color">省级</span></div>
                <div>检查单位: <span class="m-color">新疆维吾尔自治区应急管理厅</span></div>
            </div>
            <el-row :gutter="40" type="flex" align="middle" style="margin: 20px 0">
                <el-col :span="8" style="display: flex;align-items: center">
                    <span style="white-space: nowrap">检查时间：</span>
                    <el-date-picker
                        v-model="feedbackForm.checkTime"
                        type="datetime"
                        placeholder="选择日期时间">
                    </el-date-picker>
                </el-col>
                <el-col :span="12" style="display: flex;align-items: center">
                    <span style="white-space: nowrap">是否检查出隐患：</span>
                    <el-radio-group v-model="feedbackForm.isRisky">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-col>
            </el-row>
            <div class="report-list" v-show="feedbackForm.isRisky == 1">
                <table class="report-table">
                    <th class="m-color b-font" style="background: #337ecc;color: #fff">检查情况</th>
                    <tr><td class="m-color">序号</td><td class="m-color">检查出的隐患问题</td><td class="m-color">隐患等级</td><td class="m-color">操作</td></tr>
                    <tr v-for="(item,index) in feedbackForm.riskList">
                        <td>{{index + 1}}</td>
                        <td><el-input type="textarea" :rows="1" placeholder="请输入内容" v-model="item.info"></el-input></td>
                        <td>
                            <el-radio-group v-model="item.level">
                                <el-radio :label="1">一般隐患</el-radio>
                                <el-radio :label="2">重大隐患</el-radio>
                            </el-radio-group>
                        </td>
                        <td>
                            <el-button type="text" @click="deleteItem(index)">删除</el-button>
                        </td>
                    </tr>
                    <tr style="text-align: center"><el-button icon="el-icon-plus" type="primary" plain round @click="addItem()">添加行</el-button></tr>
                    <tr class="m-color b-font" style="text-align: center">合计</tr>
                    <tr>
                        <td class="m-color w-50">隐患总数</td>
                        <td class="m-color w-50">重大隐患数量</td>
                    </tr>
                    <tr>
                        <td class="w-50 mid"><el-input v-model="feedbackForm.totalRisk"></el-input></td>
                        <td class="w-50 mid"><el-input v-model="feedbackForm.majorNum"></el-input></td>
                    </tr>
                    <tr class="m-color b-font" style="text-align: center">执法处罚情况</tr>
                    <tr>
                        <td class="m-color w-25 mid">罚款金额（万元）</td>
                        <td class="w-25 mid"><el-input v-model="feedbackForm.fine"></el-input></td>
                        <td class="m-color w-25 mid">是否责令停产整顿</td>
                        <td class="w-25 mid">
                            <el-radio-group v-model="feedbackForm.isRectify">
                                <el-radio :label="1">是</el-radio>
                                <el-radio :label="0">否</el-radio>
                            </el-radio-group>
                        </td>
                    </tr>
                    <tr>
                        <td class="m-color w-25 mid">是否吊销许可证</td>
                        <td class="w-25 mid">
                            <el-radio-group v-model="feedbackForm.isRevoke">
                                <el-radio :label="1">是</el-radio>
                                <el-radio :label="0">否</el-radio>
                            </el-radio-group>
                        </td>
                        <td class="m-color w-25 mid">是否暂扣许可证</td>
                        <td class="w-25 mid">
                            <el-radio-group v-model="feedbackForm.isSuspended">
                                <el-radio :label="1">是</el-radio>
                                <el-radio :label="0">否</el-radio>
                            </el-radio-group>
                        </td>
                    </tr>
                </table>
            </div>
            <div>
                注：重大隐患判定标准：<el-link href="https://www.mem.gov.cn/gk/zcjd/201802/t20180202233295.shtml" target="_blank" type="primary">https://www.mem.gov.cn/gk/zcjd/201802/t20180202 233295.shtml</el-link>
            </div>
            <div style="display: flex;justify-content: center;margin: 20px 0">
                <el-button @click="confirmBack()">返回列表</el-button>
                <el-button type="primary">提交</el-button>
            </div>
        </div>
        <div class="feed-data">
            <div class="m-color data-time">2022年04月07日</div>
            <el-tabs v-model="activeTab" type="border-card" @tab-click="handleSwitch">
                <el-tab-pane label="本级" name="1">
                    <div class="record-list">
                        <div class="record-item" v-for="(item,index) in recordList" :key="index">
                            <table class="record-table">
                                <tr>
                                    <td class="w-75 m-color b-font dark-bg">烟花爆竹批发企业检查情况反馈表</td>
                                    <td class="w-25">
                                        <el-button type="primary" icon="el-icon-edit" plain @click="editRecord(index)">编辑</el-button>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="m-color w-50">被检查企业名称</td>
                                    <td class="m-color w-50">所属省市县</td>
                                </tr>
                                <tr>
                                    <td class="w-50">沙湾市国华商贸有限公司</td>
                                    <td class="w-50">新疆维吾尔自治区乌鲁木齐市米东区</td>
                                </tr>
                                <tr>
                                    <td class="m-color w-25">检查层级</td>
                                    <td class="m-color w-25">检查单位</td>
                                    <td class="m-color w-25">检查时间</td>
                                    <td class="m-color w-25">是否检查出隐患问题</td>
                                </tr>
                                <tr>
                                    <td class="w-25">省级</td>
                                    <td class="w-25">新疆维吾尔自治区应急管理厅</td>
                                    <td class="w-25">{{ item.checkTime }}</td>
                                    <td class="w-25">{{ item.isRisky }}</td>
                                </tr>
                                <tr v-if="item.isRisky=='1'"><td class="m-color">序号</td><td class="m-color">检查出的隐患问题</td><td class="m-color">隐患等级</td></tr>
                                <tr v-if="item.isRisky=='1'" v-for="(x,i) in item.riskList">
                                    <td>{{ i + 1 }}</td>
                                    <td class="overText">{{ x.info }}</td>
                                    <td>{{ x.level }}</td>
                                </tr>
                                <tr class="m-color b-font" style="text-align: center">合计</tr>
                                <tr>
                                    <td class="m-color w-50">隐患总数</td>
                                    <td class="m-color w-50">重大隐患数量</td>
                                </tr>
                                <tr>
                                    <td class="w-50">{{ item.totalRisk }}</td>
                                    <td class="w-50">{{ item.majorNum }}</td>
                                </tr>
                                <tr v-if="item.isRisky=='1'" class="m-color b-font" style="text-align: center">执法处罚情况</tr>
                                <tr v-if="item.isRisky=='1'">
                                    <td class="m-color w-25">罚款金额（万元）</td>
                                    <td class="w-25">{{ item.fine }}</td>
                                    <td class="m-color w-25">是否责令停产整顿</td>
                                    <td class="w-25">
                                        {{ item.isRectify }}
                                    </td>
                                </tr>
                                <tr v-if="item.isRisky=='1'">
                                    <td class="m-color w-25">是否吊销许可证</td>
                                    <td class="w-25">
                                        {{ item.isRevoke }}
                                    </td>
                                    <td class="m-color w-25">是否暂扣许可证</td>
                                    <td class="w-25">
                                        {{ item.isSuspended }}
                                    </td>
                                </tr>
                            </table>
                            <el-divider/>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="市级" name="2">市级</el-tab-pane>
                <el-tab-pane label="县级" name="3">县级</el-tab-pane>
            </el-tabs>
        </div>

        <el-dialog
            :visible.sync="editDialog"
            title="反馈表修改"
            append-to-body
            :close-on-click-modal="false"
            width="50%"
            center
        >
            <el-form ref="editFormRef" :model="editForm" label-width="160px" class="edit-form">
                <el-row gutter="80">
                    <el-col :span="12">
                        <el-form-item label="检查时间：">
                            <el-date-picker
                                v-model="editForm.checkTime"
                                type="datetime"
                                placeholder="选择日期时间">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="是否检查出隐患问题：">
                            <el-radio-group v-model="editForm.isRisky">
                                <el-radio :label="1">是</el-radio>
                                <el-radio :label="0">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>

                <div class="form-list" v-if="editForm.isRisky==1">
                    <table class="form-table">
                        <th><span>序号</span><span>检查出的隐患问题</span><span>隐患等级</span><span>操作</span></th>
                        <tr v-for="(item,index) in editForm.riskList">
                            <td class="num">{{index + 1}}</td>
                            <td class="info"><el-input type="textarea" :rows="1" placeholder="请输入内容" v-model="item.info"></el-input></td>
                            <td class="level">
                                <el-radio-group v-model="item.level">
                                    <el-radio :label="1">一般隐患</el-radio>
                                    <el-radio :label="2">重大隐患</el-radio>
                                </el-radio-group>
                            </td>
                            <td class="edit">
                                <el-button type="text" @click="deleteEditItem(index)">删除</el-button>
                            </td>
                        </tr>
                        <tr style="text-align: center"><el-button type="primary" plain icon="el-icon-plus" @click="addEditItem()">添加行</el-button></tr>
                    </table>
                </div>
                <el-row gutter="80" v-if="editForm.isRisky==1">
                    <el-col :span="12">
                        <el-form-item label="隐患总数：">
                            <el-input v-model="editForm.totalRisk"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="是否责令停产整顿：">
                            <el-radio-group v-model="editForm.isRectify">
                                <el-radio :label="1">是</el-radio>
                                <el-radio :label="0">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row gutter="80" v-if="editForm.isRisky==1">
                    <el-col :span="12">
                        <el-form-item label="重大隐患数量：">
                            <el-input v-model="editForm.majorNum"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="是否吊销许可证：">
                            <el-radio-group v-model="editForm.isRevoke">
                                <el-radio :label="1">是</el-radio>
                                <el-radio :label="0">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row gutter="80" v-if="editForm.isRisky==1">
                    <el-col :span="12">
                        <el-form-item label="罚款金额（万元）：">
                            <el-input v-model="editForm.fine"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="是否暂扣许可证：">
                            <el-radio-group v-model="editForm.isSuspended">
                                <el-radio :label="1">是</el-radio>
                                <el-radio :label="0">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button>取消</el-button>
              <el-button type="primary">提交</el-button>
            </span>
        </el-dialog>
    </el-dialog>
</template>

<script>
    import {computePageCount} from "@/utils";

    export default {
        name: "reportDetails",
        data(){
            return{
                dialogVisible:false,
                editDialog: false,
                activeTab: '1',
                feedbackForm:{
                    checkTime: '',
                    isRisky: '',
                    riskList: [
                        {
                            info: '',
                            level: ''
                        }
                    ],
                    totalRisk: '',
                    majorNum: '',
                    fine: '',
                    isRectify: '',
                    isRevoke: '',
                    isSuspended: ''
                },
                recordList:[
                    {
                        checkTime: '2022-11-02',
                        isRisky: 1,
                        riskList: [
                            {
                                info: '测试数据一',
                                level: 1
                            },
                            {
                                info: '测试数据二',
                                level: 0
                            }
                        ],
                        totalRisk: 1,
                        majorNum: 0,
                        fine: '2500',
                        isRectify: 0,
                        isRevoke: 0,
                        isSuspended: 1
                    },
                    {
                        checkTime: '2022-11-02',
                        isRisky: 0,
                        riskList: [],
                        totalRisk: 0,
                        majorNum: 0,
                        fine: '',
                        isRectify: 0,
                        isRevoke: 0,
                        isSuspended: 0
                    }
                ],
                editForm:{
                    checkTime: '',
                    isRisky: '',
                    riskList: [],
                    totalRisk: '',
                    majorNum: '',
                    fine: '',
                    isRectify: '',
                    isRevoke: '',
                    isSuspended: ''
                }
            }
        },
        watch: {
        },
        methods:{
            confirmBack(){
                this.dialogVisible = false
            },
            handleSwitch(tab, event) {
                console.log(tab, event);
            },

            addItem(){
                const newItem = {
                    info: '',
                    level: ''
                }
                this.feedbackForm.riskList.push(newItem)
            },
            deleteItem(i){
                console.log(i)
                this.feedbackForm.riskList.splice(i,1)
            },
            editRecord(index){
                const t = this
                t.editDialog = true
            },
            addEditItem(){
                const newItem = {
                    info: '',
                    level: ''
                }
                this.editForm.riskList.push(newItem)
            },
            deleteEditItem(i){
                console.log(i)
                this.editForm.riskList.splice(i,1)
            },
        },
    }
</script>

<style lang="scss" scoped>
    .input-with-select .el-select {
        width: 100%
    }

    .el-date-editor.el-input{
        width: 100%;
    }

    .dialog-title{
        width: 100%;
        display: flex;
        align-items: center;
        div{
            width: 50%;
            font-size: 22px;
            font-weight: bolder;
        }
        span{
            width: 25%;
        }
    }
    .feed-tit{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-flow: wrap;
        background: #ecf5ff;
        padding: 10px;
        border-radius: 4px;

        &>div{
            width: 50%;
            margin-bottom: 10px;
            &:nth-of-type(3),&:nth-of-type(4){
                margin-bottom: 0;
            }
        }
    }
    .feed-data{
        position: relative;

        .data-time{
            position: absolute;
            height: 40px;
            line-height: 40px;
            right: 10px;
            top: 0;
        }
    }


    .report-list{
        .report-table{
            width: 100%;
            border-collapse: collapse;
            border: 1px solid #337ecc;
            margin: 20px 0;
            th{
                padding: 10px 0;
                border: 1px solid #ccc;
                border-left: none;

                &:first-of-type{
                    border-left: 1px solid #ccc;
                }
            }
            tr{
                width: 100%;
                height: 44px;
                line-height: 42px;
                border-bottom: 1px solid #ccc;

                &:last-of-type{
                    border-bottom: none;
                }
                td{
                    border-right: 1px solid #ccc;
                    display: inline-block;
                    height: 44px;
                    vertical-align: middle;
                    text-align: center;
                    line-height: 42px;

                    &:last-of-type{
                        border-right: none;
                    }
                    ::v-deep.el-textarea{
                        .el-textarea__inner{
                            min-height: 40px !important;
                            background-color:  #ecf5ff;
                            border: 1px solid #d9ecff;
                        }
                    }

                    &:nth-of-type(1){
                        width: 5%;
                    }
                    &:nth-of-type(2){
                        width: 50%
                    }
                    &:nth-of-type(3){
                        width: 35%
                    }
                    &:nth-of-type(4){
                        width: 10%;
                        border-right: none;
                    }
                    &.w-50{
                        width: 50%;
                    }
                    &.w-25{
                        width: 25%;
                    }
                }
            }
            .b-font{
                font-size: 16px;
                font-weight: bolder;
            }
            ::v-deep.mid{
                .el-input__inner{
                    text-align: center;
                    background-color:  #ecf5ff;
                    border: 1px solid #d9ecff;
                }
            }
        }
    }
    .record-list{
        .record-table{
            width: 100%;
            border-collapse: collapse;
            border: 1px solid #79bbff;
            margin: 0 0 20px;
            background: #fff;
            box-shadow: 0 3px 12px rgba(0,0,0,.2);
            th{
                padding: 10px 0;
                border: 1px solid #ccc;
                border-left: none;

                &:first-of-type{
                    border-left: 1px solid #ccc;
                }
            }
            tr{
                width: 100%;
                height: 44px;
                line-height: 42px;
                border-bottom: 1px solid #ccc;

                &:last-of-type{
                    border-bottom: none;
                }
                td{
                    border-right: 1px solid #ccc;
                    display: inline-block;
                    height: 44px;
                    vertical-align: middle;
                    text-align: center;
                    line-height: 41px;

                    &:last-of-type{
                        border-right: none;
                    }

                    ::v-deep.el-textarea{
                        .el-textarea__inner{
                            min-height: 40px !important;
                            background-color:  #ecf5ff;
                            border: 1px solid #d9ecff;
                        }
                    }

                    &:nth-of-type(1){
                        width: 5%;
                    }
                    &:nth-of-type(2){
                        width: 60%
                    }
                    &:nth-of-type(3){
                        width: 35%;
                    }
                    &.w-50{
                        width: 50%;
                    }
                    &.w-25{
                        width: 25%;
                    }
                    &.w-75{
                        width: 75%;
                    }
                    &.dark-bg{
                        background: #409EFF;
                        color: #fff;
                    }
                    &.overText{
                        overflow: auto;
                        line-height: 1.5;
                        text-align: left;
                        padding: 10px;
                    }
                }
            }
            .b-font{
                font-size: 16px;
                font-weight: bolder;
            }
            ::v-deep.mid{
                .el-input__inner{
                    text-align: center;
                    background-color:  #ecf5ff;
                    border: 1px solid #d9ecff;
                }
            }
        }
        .el-divider{
            background-color: #999;
        }
    }
    .edit-form{
        .form-list{
            width: 100%;
            .form-table{
                width: 100%;
                border-collapse: collapse;
                border: 1px solid #ccc;
                margin: 10px 0;
                th{
                    width: 100%;
                    display: flex;
                    border-bottom: 1px solid #ccc;
                    align-items: center;

                    span{
                        height: 100%;
                        padding: 10px 0;
                        border-right: 1px solid #ccc;
                        box-sizing: border-box;

                        &:nth-of-type(1){
                            width: 10%;
                            border-left: none
                        }
                        &:nth-of-type(2){
                            width: 50%;
                        }
                        &:nth-of-type(3){
                            width: 30%;
                        }
                        &:nth-of-type(4){
                            width: 10%;
                            border-right: none;
                        }
                    }
                }
                tr{
                    width: 100%;
                    height: 44px;
                    line-height: 42px;
                    border-bottom: 1px solid #ccc;

                    &:last-of-type{
                        border-bottom: none;
                    }

                    td{
                        border-right: 1px solid #ccc;
                        display: inline-block;
                        height: 44px;
                        vertical-align: middle;
                        text-align: center;
                        line-height: 42px;
                        &:last-of-type{
                            border-right: none;
                        }
                    }
                    .num{
                        width: 10%
                    }
                    .info{
                        width: 50%;

                        ::v-deep.el-textarea{
                            .el-textarea__inner{
                                min-height: 40px !important;
                            }
                        }
                    }
                    .level{
                        width: 30%;

                        .el-radio{
                            margin-right: 15px;
                        }
                    }
                    .edit{
                        width: 10%;
                    }
                }
            }
        }
    }

</style>

 src/views/specialCheck/components/reportDetails.vue

对比新文件
@@ -0,0 +1,246 @@
<template>
    <el-dialog
        :visible.sync="dialogVisible"
        append-to-body
        :close-on-click-modal="false"
        width="75%"
        center
    >
         <div slot="title" class="dialog-title">
            烟花爆竹批发企业自查情况信息报送表
         </div>
        <div class="table-tit">
            <div>企业名称: <span class="m-color">{{corpInfo.name}}</span></div>
            <div>所属省市县: <span class="m-color">{{corpInfo.location}}</span></div>
        </div>
        <div class="corp-list">
            <table class="corp-table">
                <th class="m-color b-font">企业基本情况</th>
                <tr>
                    <td class="m-color w-33">批发许可证状态</td>
                    <td class="m-color w-33">库存（万箱）</td>
                    <td class="m-color w-33">库容（万箱）</td>
                </tr>
                <tr>
                    <td class="w-33">{{corpInfo.isInDate}}</td>
                    <td class="w-33">{{corpInfo.stock}}</td>
                    <td class="w-33">{{corpInfo.store}}</td>
                </tr>
                <tr class="m-color b-font" style="text-align: center">自查与整改情况</tr>
                <tr>
                    <td class="m-color w-5">序号</td>
                    <td class="m-color w-15">自查隐患问题描述</td>
                    <td class="m-color w-10">检查时间</td>
                    <td class="m-color w-10">隐患等级</td>
                    <td class="m-color w-25">整改措施</td>
                    <td class="m-color w-10">整改资金(元)</td>
                    <td class="m-color w-5">责任人</td>
                    <td class="m-color w-20">隐患状态</td>
                </tr>
                <tr v-for="(item,index) in corpInfo.measures" :key="index">
                    <td class="w-5">{{index}}</td>
                    <td class="w-15 overText">{{item.desc}}</td>
                    <td class="w-10">{{item.checkTime}}</td>
                    <td class="w-10">{{item.level}}</td>
                    <td class="w-25 overText">{{item.action}}</td>
                    <td class="w-10">{{item.money}}</td>
                    <td class="w-5">{{item.name}}</td>
                    <td class="w-20">{{item.status}}</td>
                </tr>
                <tr>
                    <td class="m-color w-50">隐患问题情况</td>
                    <td class="m-color w-50">整改情况</td>
                </tr>
                <tr>
                    <td class="m-color w-25">隐患总数</td>
                    <td class="m-color w-25">重大隐患数量</td>
                    <td class="m-color w-25">已整改隐患总数</td>
                    <td class="m-color w-25">已整改重大隐患数量</td>
                </tr>
                <tr>
                    <td class="w-25">{{corpInfo.totalRisks}}</td>
                    <td class="w-25">{{corpInfo.majorRisk}}</td>
                    <td class="w-25">{{corpInfo.fixRisks}}</td>
                    <td class="w-25">{{corpInfo.fixMajorRisk}}</td>
                </tr>
            </table>
            <div class="table-bottom">
                <div>填报人: <span class="m-color">{{corpInfo.reporter}}</span></div>
            </div>
            <div class="table-bottom">
                <div>填报人联系电话: <span class="m-color">{{corpInfo.reportPhone}}</span></div>
                <div>填报时间: <span class="m-color">{{corpInfo.reportTime}}</span></div>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button>情况反馈</el-button>
          <el-button type="primary" @click="confirmBack()">返回列表</el-button>
        </span>
    </el-dialog>
</template>

<script>
    import {computePageCount} from "@/utils";

    export default {
        name: "reportDetails",
        data(){
            return{
                dialogVisible:false,
                corpInfo:{
                    name: '沙湾市国华商贸有限公司',
                    location: '新疆维吾尔自治区塔城地区沙湾县',
                    isInDate: true,
                    stock: '0.7321',
                    store: '3',
                    measures: [
                        {
                            desc: '未及时设防未及时设防未及时设防未及时设防未及时设防未及时设防未及时设防未及时设防未及时设防未及时设防未及时设防',
                            checkTime: '2022年12月13日',
                            level: '一般隐患',
                            action: '及时设防',
                            money: '30',
                            name: '田维云',
                            status: '整改完成期限：2022年10月13日'
                        },
                        {
                            desc: '未及时设防',
                            checkTime: '2022年12月13日',
                            level: '一般隐患',
                            action: '及时设防',
                            money: '0',
                            name: '刘海亮',
                            status: '整改完成期限：2022年10月13日'
                        }
                    ],
                    totalRisks: 2,
                    majorRisk: 0,
                    fixRisks: 2,
                    fixMajorRisk: 0,
                    reporter: '张建路',
                    reportPhone: '15699336111',
                    reportTime: '2022-10-13'
                }
            }
        },
        watch: {
        },
        methods:{
            confirmBack(){
                this.dialogVisible = false
            }
        },
    }
</script>

<style lang="scss" scoped>
    .input-with-select .el-select {
        width: 120px;
    }

    .el-date-editor.el-input{
        width: 100%;
    }
    .dialog-title{
        font-size: 22px;
        font-weight: bolder;
    }
    .table-tit{
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        div:first-of-type{
            margin-right: 100px;
        }
    }
    .corp-list{
        .corp-table{
            width: 100%;
            border-collapse: collapse;
            border: 1px solid #79bbff;
            margin: 10px 0;
            th{
                padding: 10px 0;
                border: 1px solid #79bbff;
                border-bottom: 1px solid #ccc;
            }
            tr{
                width: 100%;
                height: 44px;
                line-height: 42px;
                border-bottom: 1px solid #ccc;

                &:last-of-type{
                    border-bottom: none;
                }
                td{
                    border-right: 1px solid #ccc;
                    display: inline-block;
                    height: 44px;
                    vertical-align: middle;
                    text-align: center;
                    line-height: 42px;

                    &:last-of-type{
                        border-right: none;
                    }
                    ::v-deep.el-textarea{
                        .el-textarea__inner{
                            min-height: 40px !important;
                            background-color:  #ecf5ff;
                            border: 1px solid #d9ecff;
                        }
                    }

                    &.w-5{
                        width: 5%;
                    }
                    &.w-10{
                        width: 10%;
                    }
                    &.w-15{
                        width: 15%;
                    }
                    &.w-20{
                        width: 20%;
                    }
                    &.w-50{
                        width: 50%;
                    }
                    &.w-25{
                        width: 25%;
                    }
                    &.w-75{
                        width: 75%;
                    }
                    &.w-33{
                        width: 33.33%;
                    }
                    &.overText{
                        overflow: auto;
                        line-height: 1.5;
                        text-align: left;
                        padding: 10px;
                    }
                }
            }
            .b-font{
                font-size: 16px;
                font-weight: bolder;
            }
            ::v-deep.mid{
                .el-input__inner{
                    text-align: center;
                    background-color:  #ecf5ff;
                    border: 1px solid #d9ecff;
                }
            }
        }
        .table-bottom{
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
        }
    }
</style>

 src/views/specialCheck/components/retailForm.vue

对比新文件
@@ -0,0 +1,240 @@
<template>
    <div class="table">
        <div class="filter-container">
            <div class="table-tit">
                <h2>2023年上半年烟花爆竹生产经营安全检查(零售)</h2>
                <span>（检查一家反馈一家，没有检查出隐患问题的也要登记反馈）</span>
            </div>
            <div class="control-bar">
                <div>
                    批发企业共计<span>416</span>家，其中：已自查<span>115</span>家，未自查<span class="undone">301</span>家；本级已经抽查<span>51</span>家，未检查<span class="undone">365</span>家，完成率<span>100%</span>。
                </div>
                <el-button class="filter-item" style="margin-left: 10px;" type="primary"
                           icon="el-icon-search">自定义查询
                </el-button>
            </div>
        </div>
        <div class="table_content">
            <el-table
                v-loading="listLoading"
                :key="tableKey"
                :data="checkData"
                border
                fit
                highlight-current-row
                style="width: 100%;"
            >

                <el-table-column type="index" label="序号" align="center" width="80"/>
                <el-table-column label="单位名称" prop="owner" align="center" width="180">
                    <template slot-scope="scope">
                        <span>{{ scope.row.owner }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="联系电话" prop="phone" align="center">
                    <template slot-scope="scope">
                        <span>{{scope.row.phone}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="库存数量/万箱" prop="stock" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.stock }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="是否查出隐患" prop="isRisk" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.isRisk == 0 ? '否' : '是' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="自查填报时间" prop="selfCheckTime" width="130" align="center" sortable>
                    <template slot-scope="scope">
                        <span>{{ scope.row.selfCheckTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="填报状态" prop="fillStatus" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.fillStatus == 0 ? '未填报' : '已填报' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="详情" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button type="text" @click="viewDetails(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="反馈状态" prop="feedback" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.feedback == 0 ? '未反馈' : '已反馈' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="执法抽查" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button type="text" @click="toFeedback(scope.row)">情况反馈</el-button>
                    </template>
                </el-table-column>
            </el-table>


            <el-pagination
                v-show="recordTotal>0"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="pageSize"
                :total="recordTotal"
                layout="total, sizes, prev, pager, next, jumper"
                background
                style="float:right;margin:3px"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>

<script>
import {mapGetters} from "vuex";
import Cookies from "_js-cookie@2.2.0@js-cookie";
import {paramList} from "../../../api/contract";
import {computePageCount} from "../../../utils";
import {parseError} from "../../../utils/messageDialog";

export default {
name: "retailForm",
    data(){
        return{
            recordTotal: 0,
            pageSize: 10,
            pageTotal: 0,
            currentPage: 1,
            listLoading: false,
            tableKey: 0,
            checkData: [
                {
                    owner: '单位一',
                    phone: '88888888',
                    stock: 266,
                    isRisk: 0,
                    selfCheckTime: '2022-10-27 15:16:00',
                    fillStatus: 1,
                    feedback: 0,
                },
                {
                    owner: '单位二',
                    phone: '66666666',
                    stock: 288,
                    isRisk: 1,
                    selfCheckTime: '2022-10-27 15:16:00',
                    fillStatus: 0,
                    feedback: 1,
                }
            ],
        }
    },
    created() {
        // this.getDataList();
    },
    computed: {
        ...mapGetters([
            'userType',
            'name'
        ])
    },
    methods:{
        // getDataList() {
            // const t = this;
            // const params = {};
            // params['pageIndex'] = t.currentPage;
            // params['pageSize'] = t.pageSize;
            // params['sort'] = t.sort;
            // params['order'] = t.order;
            // const userName = Cookies.get('userName');
            // const name = Cookies.get('name');
            // params['operator'] = name + '(' + userName + ')';
            // for (const i in t.queryForm) {
            //     if (t.queryForm[i] != undefined && t.queryForm[i].toString() != '') {
            //         params[i] = t.queryForm[i]
            //     }
            // }
            // t.listLoading = true
            // paramList(params).then(response => {
            //     const res = response.data;
            //     if (res.code === "200") {
            //         const result = res.result;
            //         t.recordTotal = result.totalCount;
            //         t.pageSize = result.pageSize;
            //         t.pageTotal = computePageCount(result.totalCount, result.pageSize);
            //         t.currentPage = result.pageIndex;
            //         t.checkData = result.result
            //     } else {
            //         parseError({error: res.message, vm: t})
            //     }
            //     t.listLoading = false
            // }).catch(error => {
            //     t.listLoading = false
            //     parseError({error: error, vm: t})
            // })
        // },

        handleSizeChange: function (val) {
            this.pageSize = val
            this.currentPage = 1
            // this.getDataList()
        },
        handleCurrentChange: function (val) {
            this.currentPage = val
            // this.getDataList()
        },

        viewDetails(row){
            console.log(row)
        },

        toFeedback(row){
            console.log(row)
        }
    }
}
</script>

<style lang="scss" scoped>
    .table{
        width: 100%;
        height: 100%;
        .filter-container{
            .table-tit{
                text-align: center;
                margin-bottom: 10px;
                h2{
                    margin: 0;
                }
                span{
                    display: block;
                    margin-top: 6px;
                    color: #ff0000;
                }
            }
            .control-bar{
                display: flex;
                justify-content: space-between;
                align-items: center;

                div{
                    span{
                        font-size: 22px;
                        margin: 0 6px;
                        color: #034EA2;
                        font-weight: bolder;
                    }

                    .undone{
                        color: #ff0000;
                    }
                }
            }
        }
        .filter-item{
            margin-bottom: 0;
        }
    }
</style>

 src/views/specialCheck/components/sendWork.vue

对比新文件
@@ -0,0 +1,240 @@
<template>
    <el-dialog
        :visible.sync="dialogVisible"
        title="专项检查任务下发"
        append-to-body
        :close-on-click-modal="false"
        width="60%"
        center
    >
        <el-form ref="form" :model="workForm" label-width="80px">
            <el-form-item label="专项检查任务名称：" label-width="140px">
                <el-input type="textarea" v-model="workForm.name"></el-input>
            </el-form-item>
            <div class="form-part">
                <h3>省级检查指标</h3>
<!--                <p>批发企业：</p>-->
                <el-divider content-position="left">批发企业</el-divider>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="完成检查不低于：" label-width="140px">
                            <el-input v-model="workForm.pro.whole" class="input-with-select">
                                <el-select v-model="workForm.pro.wholeUnit" slot="append">
                                    <el-option label="家" value="1"></el-option>
                                    <el-option label="%" value="2"></el-option>
                                </el-select>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="完成期限：" label-width="140px">
                            <el-date-picker
                                v-model="workForm.pro.wholeDate"
                                type="date"
                                placeholder="请选择截止日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
<!--                <p>零售企业：</p>-->
                <el-divider content-position="left">零售企业</el-divider>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="完成检查不低于：" label-width="140px">
                            <el-input v-model="workForm.pro.retail" class="input-with-select">
                                <el-select v-model="workForm.pro.retailUnit" slot="append">
                                    <el-option label="家" value="1"></el-option>
                                    <el-option label="%" value="2"></el-option>
                                </el-select>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="完成期限：" label-width="140px">
                            <el-date-picker
                                v-model="workForm.pro.retailDate"
                                type="date"
                                placeholder="请选择截止日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
            <div class="form-part">
                <h3>市州级检查指标</h3>
<!--                <p>批发企业：</p>-->
                <el-divider content-position="left">批发企业</el-divider>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="完成检查不低于：" label-width="140px">
                            <el-input v-model="workForm.city.whole" class="input-with-select">
                                <template slot="append">%</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="完成期限：" label-width="140px">
                            <el-date-picker
                                v-model="workForm.city.wholeDate"
                                type="date"
                                placeholder="请选择截止日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
<!--                <p>零售企业：</p>-->
                <el-divider content-position="left">零售企业</el-divider>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="完成检查不低于：" label-width="140px">
                            <el-input v-model="workForm.city.retail" class="input-with-select">
                                <template slot="append">%</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="完成期限：" label-width="140px">
                            <el-date-picker
                                v-model="workForm.city.retailDate"
                                type="date"
                                placeholder="请选择截止日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
            <div class="form-part">
                <h3>区县级检查指标</h3>
<!--                <p>批发企业：</p>-->
                <el-divider content-position="left">批发企业</el-divider>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="完成检查不低于：" label-width="140px">
                            <el-input v-model="workForm.county.whole" class="input-with-select">
                                <template slot="append">%</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="完成期限：" label-width="140px">
                            <el-date-picker
                                v-model="workForm.county.wholeDate"
                                type="date"
                                placeholder="请选择截止日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
<!--                <p>零售企业：</p>-->
                <el-divider content-position="left">零售企业</el-divider>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="完成检查不低于：" label-width="140px">
                            <el-input v-model="workForm.county.retail" class="input-with-select">
                                <template slot="append">%</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="完成期限：" label-width="140px">
                            <el-date-picker
                                v-model="workForm.county.retailDate"
                                type="date"
                                placeholder="请选择截止日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
            <el-form-item label="企业自查期限：" label-width="140px">
                <el-date-picker
                    v-model="workForm.corpDate"
                    type="date"
                    placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">重置</el-button>
          <el-button type="primary" @click="confirmSend()">确认下发</el-button>
        </span>
    </el-dialog>
</template>

<script>
    import {computePageCount} from "@/utils";

    export default {
        name: "sendWork",
        data(){
            return{
                dialogVisible:false,
                workForm: {
                    name: '',
                    pro:{
                        whole: '',
                        wholeUnit: '1',
                        wholeDate: '',
                        retail: '',
                        retailUnit: '1',
                        retailDate: ''
                    },
                    city:{
                        whole: '',
                        wholeDate: '',
                        retail: '',
                        retailDate: ''
                    },
                    county:{
                        whole: '',
                        wholeDate: '',
                        retail: '',
                        retailDate: ''
                    }
                }
            }
        },
        watch: {
        },
        methods:{
            confirmSend(){
                this.dialogVisible = false
            }
        },
    }
</script>

<style lang="scss" scoped>
    .input-with-select .el-select {
        width: 120px;
    }

    .el-date-editor.el-input{
        width: 100%;
    }
    .el-divider__text{
        background-color: #fafafa;
        color: #034EA2;
    }
    .form-part{
        background: #fafafa;
        padding: 10px 15px;
        border-radius: 8px;
        margin-bottom: 20px;

        &:last-of-type{
            margin-bottom: 0;
        }
        &>h3{
            text-align: center;
            color: #034EA2;
        }

        &>p{
            font-weight: bolder;
            font-size: 15px;
            padding-left: 20px;
            color: #034EA2;
        }
    }
</style>

 src/views/specialCheck/components/wholesaleForm.vue

对比新文件
@@ -0,0 +1,309 @@
<template>
    <div class="table">
        <div class="filter-container">
            <div class="table-tit">
                <h2>2023年上半年烟花爆竹生产经营安全检查(批发)</h2>
                <span>（检查一家反馈一家，没有检查出隐患问题的也要登记反馈）</span>
            </div>
            <div class="control-bar">
                <div>
                    批发企业共计<span>17</span>家，其中：已自查<span>15</span>家，未自查<span class="undone">2</span>家；本级已经抽查<span>5</span>家，未检查<span class="undone">12</span>家，完成率<span>100%</span>。
                </div>
                <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-search" @click="showFilter = !showFilter">{{showFilter?'关闭查询':'自定义查询'}}</el-button>
            </div>
            <transition name="el-zoom-in-top">
                <el-row v-show="showFilter" :gutter="20">
                    <el-col :span="6">
                        <span>单位名称：</span>
                        <el-input v-model="search.name" class="carrier_search_input"></el-input>
                    </el-col>
                    <el-col :span="8">
                        <span>行政区划：</span>
                        <el-cascader
                            :options="options"
                            v-model="selectedOptions"
                            :props="{ checkStrictly: true,expandTrigger: 'hover'}"
                            separator="-"
                            @change="locationChange">
                        </el-cascader>
                    </el-col>
                    <el-col :span="6">
                        <span>自查是否有隐患：</span>
                        <el-radio-group v-model="search.isRisky">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="2">否</el-radio>
                        </el-radio-group>
                    </el-col>
                    <el-col :span="4">
                        <el-button  style="margin-right: 10px;" type="primary">查询</el-button>
                        <el-button class="resetBtn"  type="primary" plain>重置</el-button>
                    </el-col>
                </el-row>
            </transition>
        </div>
        <div class="table_content">
            <el-table
                v-loading="listLoading"
                :key="tableKey"
                :data="checkData"
                border
                fit
                highlight-current-row
                style="width: 100%;"
            >

                <el-table-column type="index" label="序号" align="center" width="80"/>
                <el-table-column label="单位名称" prop="owner" align="center" width="180">
                    <template slot-scope="scope">
                        <span>{{ scope.row.owner }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="联系电话" prop="phone" align="center">
                    <template slot-scope="scope">
                        <span>{{scope.row.phone}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="库存数量/万箱" prop="stock" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.stock }}</span>
                    </template>
                </el-table-column>

                <el-table-column label="是否查出隐患" prop="isRisk" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.isRisk == 0 ? '否' : '是' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="自查填报时间" prop="selfCheckTime" width="130" align="center" sortable>
                    <template slot-scope="scope">
                        <span>{{ scope.row.selfCheckTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="填报状态" prop="fillStatus" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.fillStatus == 0 ? '未填报' : '已填报' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="详情" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button type="text" @click="viewDetails(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="反馈状态" prop="feedback" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.feedback == 0 ? '未反馈' : '已反馈' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="执法抽查" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button type="text" @click="toFeedback(scope.row)">情况反馈</el-button>
                    </template>
                </el-table-column>
            </el-table>


            <el-pagination
                v-show="recordTotal>0"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="pageSize"
                :total="recordTotal"
                layout="total, sizes, prev, pager, next, jumper"
                background
                style="float:right;margin:3px"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
        <report-details ref="report"></report-details>
        <feedback-details ref="feedback"></feedback-details>
    </div>
</template>

<script>
import {mapGetters} from "vuex";
import Cookies from "_js-cookie@2.2.0@js-cookie";
import {paramList} from "../../../api/contract";
import {computePageCount} from "../../../utils";
import {parseError} from "../../../utils/messageDialog";
import ReportDetails from "./reportDetails";
import feedbackDetails from "./feedbackDetails";
import { regionData } from 'element-china-area-data'

export default {
name: "wholesaleForm",
    components: {ReportDetails,feedbackDetails},
    data(){
        return{
            recordTotal: 0,
            pageSize: 10,
            pageTotal: 0,
            currentPage: 1,
            listLoading: false,
            showFilter: false,
            search:{
                name: '',
                location: '',
                isRisky: ''
            },
            tableKey: 0,
            options: regionData,
            selectedOptions: [],
            checkData: [
                {
                    owner: '单位一',
                    phone: '88888888',
                    stock: 266,
                    isRisk: 0,
                    selfCheckTime: '2022-10-27 15:16:00',
                    fillStatus: 1,
                    feedback: 0,
                },
                {
                    owner: '单位二',
                    phone: '66666666',
                    stock: 288,
                    isRisk: 1,
                    selfCheckTime: '2022-10-27 15:16:00',
                    fillStatus: 0,
                    feedback: 1,
                }
            ]
        }
    },
    created() {
        // this.getDataList();
    },
    computed: {
        ...mapGetters([
            'userType',
            'name'
        ])
    },
    methods:{
        // getDataList() {
            // const t = this;
            // const params = {};
            // params['pageIndex'] = t.currentPage;
            // params['pageSize'] = t.pageSize;
            // params['sort'] = t.sort;
            // params['order'] = t.order;
            // const userName = Cookies.get('userName');
            // const name = Cookies.get('name');
            // params['operator'] = name + '(' + userName + ')';
            // for (const i in t.queryForm) {
            //     if (t.queryForm[i] != undefined && t.queryForm[i].toString() != '') {
            //         params[i] = t.queryForm[i]
            //     }
            // }
            // t.listLoading = true
            // paramList(params).then(response => {
            //     const res = response.data;
            //     if (res.code === "200") {
            //         const result = res.result;
            //         t.recordTotal = result.totalCount;
            //         t.pageSize = result.pageSize;
            //         t.pageTotal = computePageCount(result.totalCount, result.pageSize);
            //         t.currentPage = result.pageIndex;
            //         t.checkData = result.result
            //     } else {
            //         parseError({error: res.message, vm: t})
            //     }
            //     t.listLoading = false
            // }).catch(error => {
            //     t.listLoading = false
            //     parseError({error: error, vm: t})
            // })
        // },

        handleSizeChange: function (val) {
            this.pageSize = val
            this.currentPage = 1
            // this.getDataList()
        },
        handleCurrentChange: function (val) {
            this.currentPage = val
            // this.getDataList()
        },
        locationChange(value) {
            console.log(value)
        },

        viewDetails(row){
            console.log(row)
            const t = this
            t.$refs.report.dialogVisible = true
        },

        toFeedback(row){
            console.log(row)
            const t = this
            t.$refs.feedback.dialogVisible = true
        }
    }
}
</script>

<style lang="scss" scoped>
    .table{
        width: 100%;
        height: 100%;
        .filter-container{
            .table-tit{
                text-align: center;
                margin-bottom: 10px;
                h2{
                    margin: 0;
                }
                span{
                    display: block;
                    margin-top: 6px;
                    color: #ff0000;
                }
            }

            .control-bar{
                display: flex;
                justify-content: space-between;
                align-items: center;

                div{
                    span{
                        font-size: 22px;
                        margin: 0 6px;
                        color: #034EA2;
                        font-weight: bolder;
                    }

                    .undone{
                        color: #ff0000;
                    }
                }
                .filter-item{
                    margin-bottom: 0;
                }
            }
            .el-row{
                margin: 20px 0 15px;
                display: flex;
                align-items: center;
                .el-col{
                    display: flex;
                    align-items: center;
                    span{
                        white-space: nowrap;
                    }
                    .el-cascader{
                        width: 100%;
                    }
                    .resetBtn{
                        color: #034EA2;
                        background-color: #ecf5ff;
                    }
                }
            }
        }

    }
</style>

 src/views/specialCheck/index.vue

对比新文件
@@ -0,0 +1,109 @@
<template>
    <div class="app-container" style="padding-bottom:40px">
        <div class="menu-area">
            <el-button class="add-btn" type="primary" icon="el-icon-plus" @click="sendJob()">新任务下发</el-button>
<!--            <div class="menu-tit">2023年上半年安全检查</div>-->
            <el-menu
                default-active="1"
                class="el-menu-vertical-demo"
                background-color="#eeeeee"
                text-color="#333"
                active-text-color="#034EA2"
                @select="menuSelect">
                <el-submenu index="1">
                    <template slot="title">
                        <i class="el-icon-s-order"></i>
                        <span>2023年上半年安全检查</span>
                    </template>
                    <el-menu-item index="1">
                        <span slot="title">安全检查反馈情况（批发）</span>
                    </el-menu-item>
                    <el-menu-item index="2">
                        <span slot="title">安全检查反馈情况（零售）</span>
                    </el-menu-item>
                    <el-menu-item index="3">
                        <span slot="title">安全检查情况汇总</span>
                    </el-menu-item>
                </el-submenu>
            </el-menu>
        </div>
        <div class="table-area">
            <wholesale-form v-show="curTab == 1"></wholesale-form>
            <retail-form v-show="curTab == 2"></retail-form>
        </div>
        <send-work ref="send"></send-work>
    </div>
</template>

<script>
    import Cookies from 'js-cookie'
    import {computePageCount} from "../../utils";
    import {mapGetters} from "vuex";
    import {MessageBox} from 'element-ui'
    import { getToken } from '@/utils/auth'
    import wholesaleForm from './components/wholesaleForm'
    import retailForm from "./components/retailForm"
    import sendWork from "./components/sendWork"

    export default {
        name: "specialCheck",
        components:{
            wholesaleForm,
            retailForm,
            sendWork
        },
        data() {
            return {
                curTab: 1
            }
        },
        created() {

        },
        mounted() {

        },
        computed: {
            ...mapGetters([
                'userType',
                'name'
            ])
        },
        methods: {
            menuSelect(key, keyPath) {
                this.curTab = key
            },
            sendJob(){
                this.$refs.send.dialogVisible = true
            }
        }
    }
</script>

<style lang="scss" scoped>
    .app-container{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;

        .menu-area{
            width: 20%;
            .add-btn{
                width: 100%;
                margin-bottom: 20px;
                background: #034EA2;
            }
            .menu-tit{
                width: 100%;
                background: #eee;
                padding: 20px 20px 10px;
                font-size: 18px;
                font-weight: bolder;
            }
        }
        .table-area{
            width: calc(80% - 20px);
        }
    }
</style>