更新

.env.development

@@ -13,7 +13,7 @@ ENV = 'development'
 
 # 苏州应急执法计划管理系统/开发环境
 # VUE_APP_BASE_API = 'http://localhost:9028'
-VUE_APP_BASE_API = 'http://221.229.220.83:9028'
+VUE_APP_BASE_API = '/api'
 
 
 # 路由懒加载

src/api/yingji/home.js

@@ -1,19 +0,0 @@
-import request from '@/utils/request'
-
-// 根据字段查询字典信息
-export function listDist(query) {
-  return request({
-    url: '/dictdata',
-    method: 'get',
-    params: query
-  })
-}
-
-// 行政区划树结构
-export function xzTree(id) {
-  return request({
-    url: '/administrative/tree',
-    method: 'get',
-  })
-}
-

src/api/yingji/keyEnterprise.js

@@ -30,7 +30,7 @@ export function deleteEnterprise(data) {
     return request({
         url: '/bKeyEnterprise',
         method: 'delete',
-        data
+        params: data
     })
 }
 //导入省重点企业
@@ -38,7 +38,10 @@ export function exportEnterprise(data) {
     return request({
         url: '/bKeyEnterprise/common/importExcel',
         method: 'post',
-        data
+        data,
+        headers: {
+            'Content-Type': 'application/x-www-form-urlencoded'
+        }
     })
 }
 //通过主键查询单条省重点企业
@@ -48,3 +51,37 @@ export function getEnterprise(id) {
         method: 'get',
     })
 }
+//查询企业信息列表
+export function businessList(data) {
+    return request({
+        url: `/info/list`,
+        method: 'get',
+        params: data
+    })
+}
+//查询单条企业信息执法详情
+export function enforcingDetail(data) {
+    return request({
+        url: `/bPlanEnterprise/getZhifa`,
+        method: 'get',
+        params: data
+
+    })
+}
+// 根据字段查询字典信息
+export function listDist(query) {
+    return request({
+        url: '/dictdata',
+        method: 'get',
+        params: query
+    })
+}
+
+// 行政区划树结构
+export function xzTree(id) {
+    return request({
+        url: '/administrative/tree',
+        method: 'get',
+    })
+}
+

src/api/yingji/planManage.js

@@ -1,50 +0,0 @@
-import request from '@/utils/request'
-
-// 分页条件查询企业基本信息列表
-export function listMsgEnterprise(query) {
-    return request({
-        url: '/info/list',
-        method: 'get',
-        params: query
-    })
-}
-// 分页条件查询计划管理
-export function listPlanGL(query) {
-    return request({
-        url: '/bPlanManage',
-        method: 'get',
-        params: query
-    })
-}
-
-// 新增计划管理
-export function addPlanGL(data) {
-    return request({
-        url: '/bPlanManage',
-        method: 'post',
-        data
-    })
-}
-//修改计划管理
-export function updatePlanGL(data) {
-    return request({
-        url: '/bPlanManage',
-        method: 'put',
-        data
-    })
-}
-//删除计划管理
-export function deletePlanGL(data) {
-    return request({
-        url: '/bPlanManage',
-        method: 'delete',
-        data
-    })
-}
-//通过主键查询单条计划管理
-export function getPlanGL(id) {
-    return request({
-        url: `/bPlanManage/${id}`,
-        method: 'get',
-    })
-}

src/views/yingji/enforcing.vue

@@ -12,25 +12,28 @@
       <div class="filtrate-condition">
         <div class="select-input">
           <div class="select-span">年份:</div>
-            <el-select v-model="form.year" placeholder="请选择">
+          <el-date-picker
-              <el-option
+            v-model="form.plannedYear"
-                v-for="item in options"
+            type="month"
-                :key="item.value"
+            placeholder="请选择"
-                :label="item.label"
+            value-format="yyyy-MM"
-                :value="item.value">
+            size="small"
-              </el-option>
+          >
-            </el-select>
+          </el-date-picker>
         </div>
         <div class="select-input">
           <div class="select-span">区划:</div>
-            <el-select v-model="form.compartment" placeholder="请选择">
+
-              <el-option
+          <el-cascader
-                v-for="item in options"
+            v-model="form.district"
-                :key="item.value"
+            :options="compartment"
-                :label="item.label"
+            :show-all-levels="false"
-                :value="item.value">
+            :props="{
-              </el-option>
+              value: 'subdistrict', //匹配响应数据中的id
-            </el-select>
+              label: 'institutionName', //匹配响应数据中的name
+              children: 'children',
+            }"
+          ></el-cascader>
         </div>
         <div class="my-checkbox">
           <el-checkbox-group v-model="checkList" @change="setmealSelect">
@@ -40,50 +43,49 @@
           </el-checkbox-group>
         </div>
       </div>
+      <div style="display: flex">
+        <div class="export" @click="searchList" style="margin-right: 10px">
+          <span>搜索</span>
+        </div>
         <div class="export" @click="exportFile">
-          <img src="@/assets/images/export.png" alt="">
+          <img src="@/assets/images/export.png" alt="" />
           <span>导出excel</span>
         </div>
       </div>
+    </div>
     <div class="tables">
       <el-table
         :data="tableData"
         style="width: 100%"
         :height="484"
         :border="false"
+        v-loading="loads"
         :row-class-name="tableRowClassName"
         :cell-style="columnStyle"
       >
         <el-table-column
-            prop="date"
+          prop="plannedYear"
           label="计划年份"
           width="180"
           header-align="center"
         >
         </el-table-column>
         <el-table-column
-            prop="address"
+          prop="district"
           label="行政区划"
           width="180"
           header-align="center"
         >
         </el-table-column>
         <el-table-column
-            prop="frim"
+          prop="entprName"
           label="企业名称"
           header-align="center"
         >
         </el-table-column>
-          <el-table-column
+        <el-table-column prop="state" label="状态" header-align="center">
-            prop="state"
-            label="状态"
-            header-align="center"
-          >
         </el-table-column>
-          <el-table-column
+        <el-table-column label="操作" header-align="center">
-            label="操作"
-            header-align="center"
-          >
           <template slot-scope="scope">
             <div class="tabs-btns">
               <div class="look" @click="look(scope.row)">
@@ -95,132 +97,295 @@
       </el-table>
     </div>
     <div class="pagination">
-        <my-pagination :total="28" @pagesChange="pagesChange"></my-pagination>
+      <my-pagination :total="total" @pagesChange="pagesChange"></my-pagination>
+    </div>
+    <!-- 查看 -->
+    <el-dialog
+      :visible.sync="addShow"
+      :show-close="false"
+      :destroy-on-close="true"
+      :close-on-click-modal="false"
+      append-to-body
+      custom-class="dialog-boxed"
+      width="50%"
+    >
+      <div class="dialog-slot">
+        <div class="closeClick">
+          <div class="newplan">
+            <div class="line"></div>
+            <div class="span">执法详情</div>
+          </div>
+          <img src="@/assets/images/close.png" alt="" @click="shutDownDetail" />
+        </div>
+        <div class="content">
+          <div class="filtrate">
+            <el-descriptions :column="2" border v-loading="detailLoad">
+              <el-descriptions-item
+                :label="item.label"
+                v-for="(item, index) in listDes"
+                :key="index"
+              >
+                {{ item.value }}
+              </el-descriptions-item>
+            </el-descriptions>
+          </div>
+        </div>
       </div>
+    </el-dialog>
   </div>
 </template>
   
   <script>
-  import myPagination from "@/views/components/myPagination/index.vue"
+import myPagination from "@/views/components/myPagination/index.vue";
+import {
+  businessList,
+  enforcingDetail,
+  xzTree,
+} from "@/api/yingji/keyEnterprise.js";
 export default {
   components: { myPagination },
   name: "Article",
   data() {
     return {
-        tableData: [{
+      tableData: [],
-          date: '2022年',
+      loads: true,
-          name: '王小虎',
+      total: 0,
-          address: '苏州',
-          frim:'扬子石化有限公司',
-          state:'未执法'
-        }, {
-          date: '2022年',
-          name: '王小虎',
-          address: '张家港市',
-          frim:'扬子石化有限公司',
-          state:'未执法'
-        }, {
-          date: '2022年',
-          name: '王小虎',
-          address: '常熟市',
-          frim:'扬子石化有限公司',
-          state:'未执法'
-        }, {
-          date: '2022年',
-          name: '王小虎',
-          address: '太仓市',
-          frim:'扬子石化有限公司',
-          state:'未执法'
-        }, {
-          date: '2022年',
-          name: '王小虎',
-          address: '昆山市',
-          frim:'扬子石化有限公司',
-          state:'未执法'
-        }, {
-          date: '2022年',
-          name: '王小虎',
-          address: '吴江区',
-          frim:'扬子石化有限公司',
-          state:'已执法'
-        }, {
-          date: '2022年',
-          name: '王小虎',
-          address: '吴中区',
-          frim:'扬子石化有限公司',
-          state:'已执法'
-        }, {
-          date: '2022年',
-          name: '王小虎',
-          address: '姑苏区',
-          frim:'扬子石化有限公司',
-          state:'已执法'
-        }, {
-          date: '2022年',
-          name: '王小虎',
-          address: '相城区',
-          frim:'扬子石化有限公司',
-          state:'已执法'
-        }, {
-          date: '2022年',
-          name: '王小虎',
-          address: '工业园区',
-          frim:'扬子石化有限公司',
-          state:'已执法'
-        }],
       options: [],
       form: {
-          year:'',
+        district: "",
-          compartment:'',
+        plannedYear: "",
+        //检测状态
+        checkStatus: "",
       },
-        checkList: ['全部'],
+      checkList: ["全部"],
       checkListTwo: [],
+      listDes: [
+        {
+          eng: "bizAddr",
+          label: "生产经营地址",
+          value: "",
+        },
+        {
+          eng: "bossEmail",
+          label: "主要负责人电子邮箱",
+          value: "",
+        },
+        {
+          eng: "bossMobtel",
+          label: "主要负责人移动电话",
+          value: "",
+        },
+        {
+          eng: "bossTel",
+          label: "主要负责人固定电话",
+          value: "",
+        },
+        {
+          eng: "cseNum",
+          label: "注册安全工程师人员数量",
+          value: "",
+        },
+
+        {
+          eng: "doublePreven",
+          label: "是否开展双重预防机制",
+          value: "",
+        },
+        {
+          eng: "ecoTypeLarge",
+          label: "经济类型大类",
+          value: "",
+        },
+        {
+          eng: "ecoTypeSmall",
+          label: "经济类型小类",
+          value: "",
+        },
+        {
+          eng: "employeeNum",
+          label: "从业人员数量",
+          value: "",
+        },
+        {
+          eng: "enterColorChart",
+          label: "企业分色图",
+          value: "",
+        },
+        {
+          eng: "entprName",
+          label: "企业名称",
+          value: "",
+        },
+        {
+          eng: "floorArea",
+          label: "占地面积",
+          value: "",
+        },
+        {
+          eng: "fullEmegNum",
+          label: "专职应急管理人员数量",
+          value: "",
+        },
+        {
+          eng: "fullSafety",
+          label: "是否有专职安全人员",
+          value: "",
+        },
+        {
+          eng: "fullSafetyNum",
+          label: "专职安全生产管理人员数量",
+          value: "",
+        },
+        {
+          eng: "gridCode",
+          label: "网格编码",
+          value: "",
+        },
+        {
+          eng: "infoYear",
+          label: "数据年份",
+          value: "",
+        },
+        {
+          eng: "isPoint",
+          label: "是否重点",
+          value: "",
+        },
+        {
+          eng: "legalPerson",
+          label: "法定代表人",
+          value: "",
+        },
+        {
+          eng: "majorHazardInstallations",
+          label: "是否存在重大危险源",
+          value: "",
+        },
+        {
+          eng: "majorHazardLevel",
+          label: "重大危险源等级",
+          value: "",
+        },
+        {
+          eng: "operatingStatus",
+          label: "经营状态",
+          value: "",
+        },
+        {
+          eng: "regAddr",
+          label: "注册地址",
+          value: "",
+        },
+        {
+          eng: "uscCode",
+          label: "统一社会信用代码",
+          value: "",
+        },
+      ],
+      searchBefore: {
+        pageSize: 10,
+        pageNum: 1,
+      },
+      details: {},
+      addShow: false,
+      detailLoad: true,
+      compartment: [],
     };
   },
-    // watch: {
+  created() {
-    //   checkListTwo:{
+    this.getList();
-    //     handler(newArray,oldArray){
+    this.xzList();
-    //       console.log(newArray,'newArray')
+  },
-    //       console.log(oldArray,'oldArray')
-    //     },
-    //     deep:true,
-    //     immediate:true,
-    //   }
-    // },
   methods: {
+    xzList() {
+      xzTree().then((res) => {
+        console.log(res);
+        this.compartment = res.data;
+        this.filterComparment(this.compartment);
+      });
+    },
+    filterComparment(e) {
+      e.forEach((value, index) => {
+        if (value.children.length >= 1) {
+          this.filterComparment(value.children);
+        } else {
+          delete value.children;
+          return
+        }
+      });
+    },
+  
+    shutDownDetail() {
+      this.addShow = false;
+    },
+    look(e) {
+      this.addShow = true;
+      this.detailLoad = true;
+      businessList({ uscCode: e.enterpriseId, ...this.searchBefore }).then(
+        (res) => {
+          this.details = res.data.list[0];
+          this.detailLoad = false;
+          for (let key in this.details) {
+            this.listDes.forEach((value1, index1) => {
+              if (key == value1.eng) {
+                this.listDes[index1].value = this.details[key];
+                return;
+              }
+            });
+          }
+        }
+      );
+    },
+    searchList() {
+      this.form.district = this.form.district[this.form.district.length-1]
+      this.searchBefore = Object.assign(this.searchBefore, this.form);
+      this.getList();
+    },
+    getList() {
+      this.loads = true;
+      enforcingDetail(this.searchBefore).then((res) => {
+        console.log(res);
+        this.tableData = res.data.list;
+        this.total = res.data.total;
+        this.loads = false;
+      });
+    },
     // 多选框变化事件
     setmealSelect() {
       this.checkList = this.checkList.slice(-1);
       if (this.checkList.length > 0) {
         this.checkListTwo = this.checkList;
-          this.changeList()
+        this.changeList();
       } else {
-          this.checkList = this.checkListTwo
+        this.checkList = this.checkListTwo;
       }
     },
     changeList() {
-        console.log(this.checkList[0])  // 拿到需要筛选的值
+      console.log(this.checkList[0]); // 拿到需要筛选的值
     },
     // tabs不同行给不同class
     tableRowClassName({ row, rowIndex }) {
       if (rowIndex % 2 !== 0) {
-          return 'success-row';
+        return "success-row";
       }
-        return '';
+      return "";
     },
     // 根据状态数据修改字体颜色
     columnStyle({ row, column, rowIndex, columnIndex }) {
       if (columnIndex == 3) {
-          if(row.state == '未执法') {
+        if (row.state == "未执法") {
-            return "color: #F71052"
+          return "color: #F71052";
-          } else if(row.state == '已执法') {
+        } else if (row.state == "已执法") {
-            return "color: #23B06C"
+          return "color: #23B06C";
         }
       }
     },
     // 页码，当前页切换事件
     pagesChange(pages) {
-        console.log(pages)
+      console.log(pages);
+      this.searchBefore.pageNum = pages.current;
+      this.searchBefore.pageSize = pages.size;
+      this.getList();
     },
     // 导出
     exportFile() {
@@ -240,6 +405,126 @@
 };
 </script>
   <style lang="scss" scoped>
+.dialog-slot {
+  .closeClick {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 10px 20px;
+    width: 100%;
+    z-index: 1000;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    text-align: center;
+    background: #f8f9fa;
+    box-shadow: 0px 1px 0px 0px #dbe0e8;
+    background-color: #e0eaf8;
+    img {
+      width: 18px;
+      height: 18px;
+      cursor: pointer;
+    }
+    .newplan {
+      display: flex;
+      align-items: center;
+      .line {
+        margin-right: 10px;
+        width: 5px;
+        height: 16px;
+        background-color: #1e70de;
+      }
+      .span {
+        font-size: 16px;
+        font-family: "Alibaba PuHuiTi";
+        font-weight: bold;
+        color: #1e70de;
+      }
+    }
+  }
+  .content {
+    // padding: 15px 10px;
+    .filtrate {
+      padding-bottom: 10px;
+      .select-input {
+        // margin-right: 10px;
+        margin-top: 20px;
+        display: flex;
+        align-items: center;
+        .select-span {
+          font-size: 13px;
+          font-family: "Alibaba PuHuiTi";
+          font-weight: 400;
+          color: #525966;
+          // line-height: 40px;
+          margin-right: 10px;
+        }
+        ::v-deep .el-select,
+        .el-cascader {
+          background-color: transparent;
+          width: 180px;
+          .el-input__inner {
+            height: 33px;
+          }
+          // border-radius: 2px;
+          .el-input
+            .el-input__suffix
+            .el-input__suffix-inner
+            .el-icon-arrow-up::before {
+            content: "";
+            background: url(../../assets/images/down2.png) center center
+              no-repeat;
+            background-size: cover;
+            position: absolute;
+            width: 10px;
+            height: 7px;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+          }
+        }
+      }
+      .select-input {
+        width: 45%;
+        ::v-deep .el-input {
+          .el-input__inner {
+            height: 33px;
+          }
+        }
+      }
+      .select-btn {
+        width: 80px;
+        height: 33px;
+        background: #2378ec;
+        border-radius: 2px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 15px;
+        font-family: Alibaba PuHuiTi;
+        font-weight: 500;
+        color: #ffffff;
+        cursor: pointer;
+        margin-right: 10px;
+      }
+      .select-btn1 {
+        background: #28b384;
+      }
+    }
+  }
+}
+::v-deep .el-descriptions-row th {
+  width: 20% !important;
+  font-size: 14px;
+  font-family: "Alibaba PuHuiTi";
+  font-weight: 400;
+}
+::v-deep .el-descriptions-row td {
+  width: 30% !important;
+  font-size: 14px;
+  font-family: "Alibaba PuHuiTi";
+  font-weight: 400;
+}
 .container-main {
   // height: calc(100vh - 84px);
   overflow: hidden;
@@ -260,7 +545,7 @@
         align-items: center;
         .select-span {
           font-size: 14px;
-            font-family: 'Alibaba PuHuiTi';
+          font-family: "Alibaba PuHuiTi";
           font-weight: 400;
           color: #525966;
           line-height: 40px;
@@ -273,9 +558,13 @@
             height: 33px;
           }
           // border-radius: 2px;
-            .el-input .el-input__suffix .el-input__suffix-inner .el-icon-arrow-up::before {
+          .el-input
+            .el-input__suffix
+            .el-input__suffix-inner
+            .el-icon-arrow-up::before {
             content: "";
-              background: url(../../assets/images/down2.png) center center no-repeat;
+            background: url(../../assets/images/down2.png) center center
+              no-repeat;
             background-size: cover;
             position: absolute;
             width: 10px;
@@ -291,7 +580,7 @@
         ::v-deep .el-checkbox-group {
           .el-checkbox__label {
             font-size: 14px;
-              font-family: 'Alibaba PuHuiTi';
+            font-family: "Alibaba PuHuiTi";
             font-weight: 400;
             color: #525966;
           }
@@ -303,7 +592,7 @@
       align-items: center;
       justify-content: center;
       padding: 6px 19px;
-        background-color: #2378EC;
+      background-color: #2378ec;
       cursor: pointer;
       img {
         width: 22px;
@@ -312,14 +601,14 @@
       span {
         color: #ffffff;
         font-size: 14px;
-          font-family: 'Alibaba PuHuiTi';
+        font-family: "Alibaba PuHuiTi";
         font-weight: 400;
       }
     }
   }
   .tables {
     margin-top: 10px;
-      background-color: #EAF2FD;
+    background-color: #eaf2fd;
     .tabs-btns {
       display: flex;
       align-items: center;
@@ -332,7 +621,7 @@
           font-size: 15px;
           font-family: Alibaba PuHuiTi;
           font-weight: 400;
-            color: #045FFD;
+          color: #045ffd;
           text-decoration: underline;
         }
       }
@@ -345,15 +634,15 @@
         height: 42px;
         text-align: center;
         font-size: 14px;
-          font-family: 'Alibaba PuHuiTi';
+        font-family: "Alibaba PuHuiTi";
         font-weight: 400;
         color: #525966;
       }
       th {
         height: 45px;
-          background-color: #EAF2FD;
+        background-color: #eaf2fd;
         font-size: 15px;
-          font-family: 'Alibaba PuHuiTi';
+        font-family: "Alibaba PuHuiTi";
         font-weight: bold;
         color: #525966;
         .el-checkbox {

src/views/yingji/focusEnter.vue

@@ -12,179 +12,429 @@
       <div class="filtrate-condition">
         <div class="select-input">
           <div class="select-span">年份:</div>
-          <el-select v-model="form.year" placeholder="请选择">
+          <div>
-            <el-option
+            <el-date-picker
-              v-for="item in options"
+              v-model="queryParms.year"
-              :key="item.value"
+              type="year"
-              :label="item.label"
+              placeholder="请选择"
-              :value="item.value"
+              value-format="yyyy"
+              size="small"
             >
-            </el-option>
+            </el-date-picker>
-          </el-select>
+          </div>
         </div>
       </div>
       <div style="display: flex">
-        <div class="export" @click="exportFile">
+        <div class="export" @click="addkeys">
+          <span>新增</span>
+        </div>
+        <div class="export" @click="searchList">
           <span>搜索</span>
         </div>
-        <div class="export export1" @click="exportFile">
+        <div class="export" @click="chongzhiList">
+          <span>重置</span>
+        </div>
+        <div class="export" style="background: #f71052" @click="deleteItem">
+          <span>删除</span>
+        </div>
+        <el-upload
+          class="upload-demo"
+          action="1"
+          ref="uploadOver"
+          :http-request="exportFile"
+          :on-success="handleSuccess"
+          :multiple="false"
+          :show-file-list="false"
+          :limit="1"
+          :file-list="fileList"
+        >
+          <div class="export export1">
             <span>导入</span>
           </div>
+        </el-upload>
       </div>
     </div>
     <div class="tables">
       <el-table
         :data="tableData"
         style="width: 100%"
+        v-loading="loading"
         :height="484"
         :border="false"
         :row-class-name="tableRowClassName"
         :cell-style="columnStyle"
+        @selection-change="handleSelectionChange"
       >
+        <el-table-column type="selection" width="55"></el-table-column>
+        <el-table-column prop="year" label="计划年份" header-align="center">
+        </el-table-column>
         <el-table-column
-          prop="date"
+          prop="enterpriseName"
-          label="计划年份"
+          label="企业名称"
           header-align="center"
         >
         </el-table-column>
         <el-table-column
-          prop="address"
+          prop="entCode"
-          label="企业名称"
+          label="统一社会信用代码"
           header-align="center"
         >
         </el-table-column>
-        <el-table-column prop="frim" label="企业类别" header-align="center">
+        <el-table-column prop="type" label="企业类别" header-align="center">
         </el-table-column>
 
-        <!-- <el-table-column label="操作" header-align="center">
+        <el-table-column label="操作" header-align="center">
           <template slot-scope="scope">
             <div class="tabs-btns">
               <div class="look" @click="look(scope.row)">
-                <span>查看执法详情</span>
+                <img src="@/assets/images/look.png" alt="" />
+                <span>查看</span>
+              </div>
+              <div class="change" @click="change(scope.row)">
+                <img src="@/assets/images/change.png" alt="" />
+                <span>修改</span>
+              </div>
+              <div class="delete" @click="deleteItem(scope.row)">
+                <img src="@/assets/images/delete.png" alt="" />
+                <span>删除</span>
               </div>
             </div>
           </template>
-        </el-table-column> -->
+        </el-table-column>
       </el-table>
     </div>
     <div class="pagination">
-      <my-pagination :total="28" @pagesChange="pagesChange"></my-pagination>
+      <my-pagination :total="total" @pagesChange="pagesChange"></my-pagination>
+    </div>
+    <!-- 新增修改 -->
+    <el-dialog
+      :visible.sync="dialogVisible"
+      custom-class="dialog-boxed"
+      append-to-body
+      width="50%"
+    >
+      <div class="dialog-slot">
+        <div class="closeClick">
+          <div class="newplan">
+            <div class="line"></div>
+            <div class="span">{{ headerText }}省重点企业</div>
+          </div>
+          <img src="@/assets/images/close.png" alt="" @click="closeDetail" />
+        </div>
+        <div class="content">
+          <div class="filtrate">
+            <el-form
+              :model="form"
+              label-width="100px"
+              class="demo-ruleForm"
+              ref="form1"
+              :rules="rules"
+            >
+              <el-row>
+                <el-col :span="24">
+                  <el-form-item label="企业名称" prop="enterpriseName">
+                    <el-input
+                      v-model="form.enterpriseName"
+                      size="small"
+                    ></el-input>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="企业代码:" prop="entCode">
+                    <el-input
+                      v-model="form.entCode"
+                      size="small"
+                      placeholder="请输入企业代码"
+                    ></el-input>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="年份:" prop="year">
+                    <el-date-picker
+                      v-model="form.year"
+                      type="year"
+                      placeholder="请选择年份"
+                      value-format="yyyy"
+                      size="small"
+                    >
+                    </el-date-picker>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col>
+                  <el-form-item label="大类:" prop="type">
+                    <el-input
+                      v-model="form.type"
+                      size="small"
+                      placeholder="请输入大类"
+                    ></el-input>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col>
+                  <el-form-item label="备注:" prop="remark">
+                    <el-input
+                      type="textarea"
+                      v-model="form.remark"
+                      size="small"
+                      :rows="5"
+                      placeholder="请输入备注"
+                    ></el-input>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+              <div
+                style="
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                "
+              >
+                <div class="select-btn" @click="confirm">确认</div>
+                <div class="select-btn" @click="closeDetail">取消</div>
+              </div>
+            </el-form>
+          </div>
         </div>
       </div>
+    </el-dialog>
+    <!-- 查看 -->
+    <el-dialog
+      :visible.sync="addShow"
+      :show-close="false"
+      :destroy-on-close="true"
+      :close-on-click-modal="false"
+      append-to-body
+      custom-class="dialog-boxed"
+      width="50%"
+    >
+      <div class="dialog-slot">
+        <div class="closeClick">
+          <div class="newplan">
+            <div class="line"></div>
+            <div class="span">查看省重点企业详细</div>
+          </div>
+          <img src="@/assets/images/close.png" alt="" @click="shutDownDetail" />
+        </div>
+        <div class="content">
+          <div class="filtrate">
+            <el-descriptions :column="2" border>
+              <el-descriptions-item label="计划年份">
+                {{ parseTime(details.year, "{y}") }}
+              </el-descriptions-item>
+              <el-descriptions-item label="企业名称">
+                {{ details.enterpriseName }}
+              </el-descriptions-item>
+              <el-descriptions-item label="企业代码">{{
+                details.entCode
+              }}</el-descriptions-item>
+              <el-descriptions-item label="企业大类">{{
+                details.type
+              }}</el-descriptions-item>
+              <el-descriptions-item label="备注">{{
+                details.remark
+              }}</el-descriptions-item>
+            </el-descriptions>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
 </template>
   
   <script>
 import myPagination from "@/views/components/myPagination/index.vue";
+import { Loading } from "element-ui";
+
+import {
+  listEnterprise,
+  addEnterprise,
+  updateEnterprise,
+  deleteEnterprise,
+  exportEnterprise,
+  getEnterprise,
+} from "@/api/yingji/keyEnterprise.js";
 export default {
   components: { myPagination },
   name: "Article",
   data() {
     return {
-      tableData: [
+      tableData: [],
-        {
+      options: [],
-          date: "2022年",
+      checkList: ["全部"],
-          name: "王小虎",
+      checkListTwo: [],
-          address: "苏州",
+      loading: false,
-          frim: "扬子石化有限公司",
+      headerText: "",
-          state: "未执法",
+      ids: null,
+      //是否显示弹出框
+      dialogVisible: false,
+      queryParms: {
+        year: "",
       },
-        {
+      searchBefore: {
-          date: "2022年",
+        pageSize: 10,
-          name: "王小虎",
+        pageNum: 1,
-          address: "张家港市",
-          frim: "扬子石化有限公司",
-          state: "未执法",
       },
-        {
+      //新增修改的参数
-          date: "2022年",
+      form: {
-          name: "王小虎",
+        //企业名称
-          address: "常熟市",
+        enterpriseName: "",
-          frim: "扬子石化有限公司",
+        //企业代码
-          state: "未执法",
+        entCode: "",
+        //备注
+        remark: "",
+        //大类
+        type: "",
+        //年份
+        year: "",
       },
-        {
+      addShow: false,
-          date: "2022年",
+      //详情
-          name: "王小虎",
+      details: {},
-          address: "太仓市",
+      rules: {
-          frim: "扬子石化有限公司",
+        enterpriseName: [
-          state: "未执法",
+          { required: true, message: "请输入企业名称", trigger: "blur" },
+        ],
+        entCode: [
+          { required: true, message: "请输入企业代码", trigger: "blur" },
+        ],
+        remark: [{ required: true, message: "请输入备注", trigger: "blur" }],
+        type: [{ required: true, message: "请输入大类", trigger: "blur" }],
+        year: [{ required: true, message: "请选择年份", trigger: "blur" }],
       },
-        {
+      //总数
-          date: "2022年",
+      total: 0,
-          name: "王小虎",
+      fileList: [],
-          address: "昆山市",
+    };
-          frim: "扬子石化有限公司",
-          state: "未执法",
   },
-        {
+  created() {
-          date: "2022年",
+    this.getList();
-          name: "王小虎",
-          address: "吴江区",
-          frim: "扬子石化有限公司",
-          state: "已执法",
   },
-        {
+  methods: {
-          date: "2022年",
+    handleRemove() {},
-          name: "王小虎",
+    searchList() {
-          address: "吴中区",
+      this.searchBefore = Object.assign(this.searchBefore, this.queryParms);
-          frim: "扬子石化有限公司",
+      this.getList();
-          state: "已执法",
     },
-        {
+    reset() {
-          date: "2022年",
+      this.form = {
-          name: "王小虎",
+        enterpriseName: "",
-          address: "姑苏区",
+        //企业代码
-          frim: "扬子石化有限公司",
+        entCode: "",
-          state: "已执法",
+        //备注
+        remark: "",
+        //大类
+        type: "",
+        //年份
+        year: "",
+      };
     },
-        {
+    //重置列表
-          date: "2022年",
+    chongzhiList() {
-          name: "王小虎",
+      this.searchBefore = {
-          address: "相城区",
+        pageSize: 10,
-          frim: "扬子石化有限公司",
+        pageNum: 1,
-          state: "已执法",
+      };
+      this.queryParms.year = "";
+      this.getList();
     },
-        {
+    //获取列表
-          date: "2022年",
+    getList() {
-          name: "王小虎",
+      this.loading = true;
-          address: "工业园区",
+      listEnterprise(this.searchBefore).then((res) => {
-          frim: "扬子石化有限公司",
+        this.tableData = res.data.list;
-          state: "已执法",
+        this.loading = false;
+        this.total = res.data.total;
+      });
     },
-      ],
+    //关闭省重点详情
-      options: [],
+    shutDownDetail() {
-      form: {
+      this.addShow = false;
-        year: "",
-        compartment: "",
     },
-      checkList: ["全部"],
+    //新增打开
-      checkListTwo: [],
+    addkeys() {
-    };
+      this.reset();
+      this.headerText = "新增";
+      this.dialogVisible = true;
+      this.$nextTick(() => {
+        this.$refs.form1.clearValidate();
+      });
     },
-  // watch: {
+    //关闭新增修改弹窗
-  //   checkListTwo:{
+    closeDetail() {
-  //     handler(newArray,oldArray){
+      this.reset();
-  //       console.log(newArray,'newArray')
+      this.dialogVisible = false;
-  //       console.log(oldArray,'oldArray')
+    },
-  //     },
+    //查看详情
-  //     deep:true,
+    look(e) {
-  //     immediate:true,
+      getEnterprise(e.id).then((res) => {
-  //   }
+        this.details = res.data;
-  // },
+        this.addShow = true;
-  methods: {
+      });
-    // 多选框变化事件
+    },
-    setmealSelect() {
+    //修改数据
-      this.checkList = this.checkList.slice(-1);
+    change(e) {
-      if (this.checkList.length > 0) {
+      this.headerText = "修改";
-        this.checkListTwo = this.checkList;
+      getEnterprise(e.id).then((res) => {
-        this.changeList();
+        this.form = res.data;
+        this.dialogVisible = true;
+        this.$nextTick(() => {
+          this.$refs.form1.clearValidate();
+        });
+      });
+    },
+    //保存
+    confirm() {
+      this.$refs.form1.validate((valid) => {
+        if (valid) {
+          if (this.form.id != null) {
+            updateEnterprise(this.form).then((response) => {
+              this.$model.msgSuccess("修改成功");
+              this.dialogVisible = false;
+              this.getList();
+            });
           } else {
-        this.checkList = this.checkListTwo;
+            addEnterprise(this.form).then((res) => {
+              this.$model.msgSuccess("新增成功");
+              this.dialogVisible = false;
+              this.getList();
+            });
+          }
         }
+      });
     },
-    changeList() {
+    //删除数据
-      console.log(this.checkList[0]); // 拿到需要筛选的值
+    deleteItem(row) {
+      /** 删除按钮操作 */
+      const ids = row.id || this.ids;
+      if (!ids) {
+        this.$model.msgError("请选择数据");
+        return;
+      }
+      this.$confirm("是否确认删除该数据?", "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(function () {
+          return deleteEnterprise({ idList: ids });
+        })
+        .then(() => {
+          this.$model.msgSuccess("删除成功");
+          this.getList();
+        })
+        .catch(() => {});
+    },
+    // 多选框变化事件
+    handleSelectionChange(rows) {
+      let arr = rows.map((item) => item.id);
+      this.ids = arr.join(",");
     },
+
     // tabs不同行给不同class
     tableRowClassName({ row, rowIndex }) {
       if (rowIndex % 2 !== 0) {
@@ -204,11 +454,35 @@ export default {
     },
     // 页码，当前页切换事件
     pagesChange(pages) {
-      console.log(pages);
+      this.searchBefore.pageSize = pages.size;
+      this.searchBefore.pageNum = pages.current;
+      this.getList();
     },
-    // 导出
+    handleSuccess() {},
-    exportFile() {
+    // 导入
-      // console.log(this.multipleSelection)
+    exportFile(e) {
+      let downloadLoadingInstance = Loading.service({
+        text: "正在导入数据，请稍候",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)",
+      });
+      let a = new FormData();
+      a.append("file", e.file);
+      exportEnterprise(a)
+        .then((res) => {
+          downloadLoadingInstance.close();
+          this.queryParms.year = "";
+          this.searchBefore = {
+            pageSize: 10,
+            pageNum: 1,
+          };
+          this.getList();
+          this.$refs.uploadOver.clearFiles();
+        })
+        .catch(() => {
+          downloadLoadingInstance.close();
+          this.$model.msgError("导入失败");
+        });
     },
   },
   mounted() {
@@ -224,6 +498,53 @@ export default {
 };
 </script>
   <style lang="scss" scoped>
+::v-deep .el-descriptions-row th {
+  width: 20% !important;
+  font-size: 14px;
+  font-family: "Alibaba PuHuiTi";
+  font-weight: 400;
+}
+::v-deep .el-descriptions-row td {
+  width: 30% !important;
+  font-size: 14px;
+  font-family: "Alibaba PuHuiTi";
+  font-weight: 400;
+}
+.tabs-btns {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .look,
+  .change,
+  .delete {
+    display: flex;
+    align-items: center;
+    margin-right: 30px;
+    cursor: pointer;
+    img {
+      width: 20px;
+      margin-right: 5px;
+    }
+    span {
+      font-size: 15px;
+      font-family: Alibaba PuHuiTi;
+      font-weight: 400;
+      color: #045ffd;
+    }
+  }
+  .delete {
+    margin-right: 0;
+    span {
+      color: #f71052;
+    }
+  }
+}
+::v-deep .el-date-editor {
+  width: 100%;
+}
+::v-deep .el-dialog__body {
+  padding-bottom: 10px;
+}
 .container-main {
   // height: calc(100vh - 84px);
   overflow: hidden;
@@ -292,6 +613,7 @@ export default {
       justify-content: center;
       padding: 6px 19px;
       background-color: #2378ec;
+      margin-right: 10px;
       cursor: pointer;
       img {
         width: 22px;
@@ -306,29 +628,12 @@ export default {
     }
     .export1 {
       background-color: #28b384;
-      margin-left: 20px;
     }
   }
   .tables {
     margin-top: 10px;
     background-color: #eaf2fd;
-    .tabs-btns {
+
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      .look {
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-        span {
-          font-size: 15px;
-          font-family: Alibaba PuHuiTi;
-          font-weight: 400;
-          color: #045ffd;
-          text-decoration: underline;
-        }
-      }
-    }
     ::v-deep .el-table {
       .success-row {
         background-color: rgba(234, 242, 253, 0.25);
@@ -361,5 +666,120 @@ export default {
     margin-top: 40px;
   }
 }
+.dialog-slot {
+  .closeClick {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 10px 20px;
+    width: 100%;
+    z-index: 1000;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    text-align: center;
+    background: #f8f9fa;
+    box-shadow: 0px 1px 0px 0px #dbe0e8;
+    background-color: #e0eaf8;
+    img {
+      width: 18px;
+      height: 18px;
+      cursor: pointer;
+    }
+    .newplan {
+      display: flex;
+      align-items: center;
+      .line {
+        margin-right: 10px;
+        width: 5px;
+        height: 16px;
+        background-color: #1e70de;
+      }
+      .span {
+        font-size: 16px;
+        font-family: "Alibaba PuHuiTi";
+        font-weight: bold;
+        color: #1e70de;
+      }
+    }
+  }
+  .content {
+    // padding: 15px 10px;
+    .filtrate {
+      padding-bottom: 10px;
+      .select-input {
+        // margin-right: 10px;
+        margin-top: 20px;
+        display: flex;
+        align-items: center;
+        .select-span {
+          font-size: 13px;
+          font-family: "Alibaba PuHuiTi";
+          font-weight: 400;
+          color: #525966;
+          // line-height: 40px;
+          margin-right: 10px;
+        }
+        ::v-deep .el-select,
+        .el-cascader {
+          background-color: transparent;
+          width: 180px;
+          .el-input__inner {
+            height: 33px;
+          }
+          // border-radius: 2px;
+          .el-input
+            .el-input__suffix
+            .el-input__suffix-inner
+            .el-icon-arrow-up::before {
+            content: "";
+            background: url(../../assets/images/down2.png) center center
+              no-repeat;
+            background-size: cover;
+            position: absolute;
+            width: 10px;
+            height: 7px;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+          }
+        }
+      }
+      .select-input {
+        width: 45%;
+        ::v-deep .el-input {
+          .el-input__inner {
+            height: 33px;
+          }
+        }
+      }
+      .select-btn {
+        width: 80px;
+        height: 33px;
+        background: #2378ec;
+        border-radius: 2px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 15px;
+        font-family: Alibaba PuHuiTi;
+        font-weight: 500;
+        color: #ffffff;
+        cursor: pointer;
+        margin-right: 10px;
+      }
+      .select-btn1 {
+        background: #28b384;
+      }
+    }
+  }
+}
+::v-deep .el-form-item__label {
+  font-size: 14px;
+  font-family: "Alibaba PuHuiTi";
+  font-weight: 400;
+  color: #525966;
+  // line-height: 40px;
+}
 </style>
   

vue.config.js

@@ -41,13 +41,21 @@ module.exports = {
     open: true,
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
-      [process.env.VUE_APP_BASE_API]: {
+      // [process.env.VUE_APP_BASE_API]: {
-        target: `http://192.168.0.117:9028`,
+      //   target: `http://192.168.0.117:9028`,
+      //   changeOrigin: true,
+      //   pathRewrite: {
+      //     ["^" + process.env.VUE_APP_BASE_API]: "",
+      //   },
+      // },
+      '/api': {
+        target: `http://192.168.0.105:9033/pharmaceuticals`,
         changeOrigin: true,
         pathRewrite: {
-          ["^" + process.env.VUE_APP_BASE_API]: "",
+          '^/api': ''
         },
       },
+      
     },
     disableHostCheck: true,
   },