From ccaa5f7b43b39e2e875b4f999832675cb87f116a Mon Sep 17 00:00:00 2001 From: Admin <978517621@qq.com> Date: 星期二, 08 十一月 2022 17:10:58 +0800 Subject: [PATCH] 新增页面 --- src/views/specialCheck/components/retailForm.vue | 240 +++++ src/views/selfCheck/components/repair.vue | 235 +++++ src/router/index.js | 17 src/views/specialCheck/components/feedbackDetails.vue | 702 ++++++++++++++++ src/views/specialCheck/components/wholesaleForm.vue | 309 +++++++ src/views/selfCheck/components/selfReport.vue | 262 ++++++ src/views/specialCheck/index.vue | 109 ++ src/views/specialCheck/components/reportDetails.vue | 246 +++++ src/views/specialCheck/components/sendWork.vue | 240 +++++ package.json | 1 src/styles/variables.scss | 1 src/views/selfCheck/index.vue | 173 ++++ src/styles/index.scss | 8 13 files changed, 2,537 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 2ffd0f5..9f36925 100644 --- a/package.json +++ b/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", diff --git a/src/router/index.js b/src/router/index.js index 2870686..8166572 100644 --- a/src/router/index.js +++ b/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({ diff --git a/src/styles/index.scss b/src/styles/index.scss index 9c196f3..2b32161 100644 --- a/src/styles/index.scss +++ b/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; } } - -} \ No newline at end of file + +} diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 9ed1277..ccfd6a0 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -7,6 +7,7 @@ $tiffany: #4AB7BD; $yellow:#FEC171; $panGreen: #30B08F; +$main: #034EA2; //sidebar $menuText:#bfcbd9; diff --git a/src/views/selfCheck/components/repair.vue b/src/views/selfCheck/components/repair.vue new file mode 100644 index 0000000..deafa3f --- /dev/null +++ b/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> diff --git a/src/views/selfCheck/components/selfReport.vue b/src/views/selfCheck/components/selfReport.vue new file mode 100644 index 0000000..6f9f9c6 --- /dev/null +++ b/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> diff --git a/src/views/selfCheck/index.vue b/src/views/selfCheck/index.vue new file mode 100644 index 0000000..2fc585c --- /dev/null +++ b/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> diff --git a/src/views/specialCheck/components/feedbackDetails.vue b/src/views/specialCheck/components/feedbackDetails.vue new file mode 100644 index 0000000..46bfba4 --- /dev/null +++ b/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> diff --git a/src/views/specialCheck/components/reportDetails.vue b/src/views/specialCheck/components/reportDetails.vue new file mode 100644 index 0000000..92df9d2 --- /dev/null +++ b/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> diff --git a/src/views/specialCheck/components/retailForm.vue b/src/views/specialCheck/components/retailForm.vue new file mode 100644 index 0000000..85939a2 --- /dev/null +++ b/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> diff --git a/src/views/specialCheck/components/sendWork.vue b/src/views/specialCheck/components/sendWork.vue new file mode 100644 index 0000000..5812319 --- /dev/null +++ b/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> diff --git a/src/views/specialCheck/components/wholesaleForm.vue b/src/views/specialCheck/components/wholesaleForm.vue new file mode 100644 index 0000000..070551e --- /dev/null +++ b/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> diff --git a/src/views/specialCheck/index.vue b/src/views/specialCheck/index.vue new file mode 100644 index 0000000..ee63d9f --- /dev/null +++ b/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> -- Gitblit v1.9.2