企业实体增加企业分类内容

src/api/etype/etype.js

@@ -1,6 +1,6 @@
 import request from '@/utils/request'
 
-// 查询企业分类列表
+// 查询企业分类列表-分页
 export function listEtype(query) {
   return request({
     url: '/etype/etype/list',
@@ -8,7 +8,14 @@ export function listEtype(query) {
     params: query
   })
 }
-
+// 查询企业分类列表-全部
+export function listEtypeAll(query) {
+  return request({
+    url: '/etype/etype/list/all',
+    method: 'get',
+    params: query
+  })
+}
 // 查询企业分类详细
 export function getEtype(id) {
   return request({

src/assets/styles/variables.scss

@@ -36,7 +36,7 @@ $base-sub-menu-background:#000c17;
 $base-sub-menu-hover:#001528;
 */
 
-$base-sidebar-width: 200px;
+$base-sidebar-width: 250px;
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass

src/views/enterprise/enterprise/index.vue

@@ -1,6 +1,12 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+    >
       <el-form-item label="企业名称" prop="enterpriseName">
         <el-input
           v-model="queryParams.enterpriseName"
@@ -11,7 +17,11 @@
       </el-form-item>
       <div>
         <ul v-if="enterpriseNameSuggestions.length" class="suggestion-list">
-          <li v-for="suggestion in enterpriseNameSuggestions" :key="suggestion" @click="selectEnterpriseName(suggestion)">
+          <li
+            v-for="suggestion in enterpriseNameSuggestions"
+            :key="suggestion"
+            @click="selectEnterpriseName(suggestion)"
+          >
             {{ suggestion }}
           </li>
         </ul>
@@ -32,45 +42,65 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
+      <el-form-item label="企业分类" prop="typeNum">
+        <el-select v-model="queryParams.typeNum" style="width: 100%">
+            <el-option
+              v-for="item in enterTypeList"
+              :key="item.number"
+              :value="item.number"
+              :label="keyToChinese(item.number)"
+            >
+            </el-option>
+          </el-select>
+      </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置</el-button
+        >
       </el-form-item>
     </el-form>
 
     <el-row :gutter="10" class="mb8">
-     <el-col :span="1.5">
-       <el-button
-         type="primary"
-         plain
-         icon="el-icon-plus"
-         size="mini"
-         @click="handleAdd"
-         v-hasPermi="['enterprise:enterprise:add']"
-       >新增</el-button>
-     </el-col>
-<!--      <el-col :span="1.5">-->
-<!--        <el-button-->
-<!--          type="success"-->
-<!--          plain-->
-<!--          icon="el-icon-edit"-->
-<!--          size="mini"-->
-<!--          :disabled="single"-->
-<!--          @click="handleUpdate"-->
-<!--          v-hasPermi="['enterprise:enterprise:edit']"-->
-<!--        >修改</el-button>-->
-<!--      </el-col>-->
-<!--      <el-col :span="1.5">-->
-<!--        <el-button-->
-<!--          type="danger"-->
-<!--          plain-->
-<!--          icon="el-icon-delete"-->
-<!--          size="mini"-->
-<!--          :disabled="multiple"-->
-<!--          @click="handleDelete"-->
-<!--          v-hasPermi="['enterprise:enterprise:remove']"-->
-<!--        >删除</el-button>-->
-<!--      </el-col>-->
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['enterprise:enterprise:add']"
+          >新增</el-button
+        >
+      </el-col>
+      <!--      <el-col :span="1.5">-->
+      <!--        <el-button-->
+      <!--          type="success"-->
+      <!--          plain-->
+      <!--          icon="el-icon-edit"-->
+      <!--          size="mini"-->
+      <!--          :disabled="single"-->
+      <!--          @click="handleUpdate"-->
+      <!--          v-hasPermi="['enterprise:enterprise:edit']"-->
+      <!--        >修改</el-button>-->
+      <!--      </el-col>-->
+      <!--      <el-col :span="1.5">-->
+      <!--        <el-button-->
+      <!--          type="danger"-->
+      <!--          plain-->
+      <!--          icon="el-icon-delete"-->
+      <!--          size="mini"-->
+      <!--          :disabled="multiple"-->
+      <!--          @click="handleDelete"-->
+      <!--          v-hasPermi="['enterprise:enterprise:remove']"-->
+      <!--        >删除</el-button>-->
+      <!--      </el-col>-->
       <el-col :span="1.5">
         <el-button
           type="warning"
@@ -79,7 +109,8 @@
           size="mini"
           @click="handleExport"
           v-hasPermi="['enterprise:enterprise:export']"
-        >导出</el-button>
+          >导出</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -91,38 +122,51 @@
           >导入</el-button
         >
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="enterpriseList" @selection-change="handleSelectionChange">
+    <el-table
+      v-loading="loading"
+      :data="enterpriseList"
+      @selection-change="handleSelectionChange"
+    >
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="序号" align="center" prop="id" />
       <el-table-column label="企业名称" align="center" prop="enterpriseName" />
       <el-table-column label="坐落地" align="center" prop="location" />
       <el-table-column label="行业代码" align="center" prop="code" />
       <el-table-column label="企业分类" align="center" prop="typeName" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-       <template slot-scope="scope">
-         <el-button
-           size="mini"
-           type="text"
-           icon="el-icon-edit"
-           @click="handleUpdate(scope.row)"
-           v-hasPermi="['enterprise:enterprise:edit']"
-         >修改</el-button>
-         <el-button
-           size="mini"
-           type="text"
-           icon="el-icon-delete"
-           @click="handleDelete(scope.row)"
-           v-hasPermi="['enterprise:enterprise:remove']"
-         >删除</el-button>
-       </template>
-     </el-table-column>
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['enterprise:enterprise:edit']"
+            >修改</el-button
+          >
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['enterprise:enterprise:remove']"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
     </el-table>
 
     <pagination
-      v-show="total>0"
+      v-show="total > 0"
       :total="total"
       :page.sync="queryParams.pageNum"
       :limit.sync="queryParams.pageSize"
@@ -133,7 +177,10 @@
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="企业名称" prop="enterpriseName">
-          <el-input v-model="form.enterpriseName" placeholder="请输入企业名称" />
+          <el-input
+            v-model="form.enterpriseName"
+            placeholder="请输入企业名称"
+          />
         </el-form-item>
         <el-form-item label="坐落地" prop="location">
           <el-input v-model="form.location" placeholder="请输入坐落地" />
@@ -141,6 +188,17 @@
         <el-form-item label="行业代码" prop="code">
           <el-input v-model="form.code" placeholder="请输入行业代码" />
         </el-form-item>
+        <el-form-item label="企业分类" prop="typeNum">
+          <el-select v-model="form.typeNum" style="width: 100%">
+            <el-option
+              v-for="item in enterTypeList"
+              :key="item.number"
+              :value="item.number"
+              :label="keyToChinese(item.number)"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -167,8 +225,12 @@
           <em>点击上传</em>
         </div>
         <div class="el-upload__tip" slot="tip">
-          <el-link type="primary" style="font-size: 12px" @click="importTemplate"
-            >点击此处下载文件上传模板</el-link>
+          <el-link
+            type="primary"
+            style="font-size: 12px"
+            @click="importTemplate"
+            >点击此处下载文件上传模板</el-link
+          >
         </div>
         <div class="el-upload__tip" style="color: red" slot="tip">
           提示：仅允许导入“xls”或“xlsx”格式文件！
@@ -183,8 +245,16 @@
 </template>
 
 <script>
-import { listEnterprise, getEnterprise, delEnterprise, addEnterprise, updateEnterprise, listEnterpriseWithType } from "@/api/enterprise/enterprise";
-import { getToken } from '@/utils/auth'
+import {
+  listEnterprise,
+  getEnterprise,
+  delEnterprise,
+  addEnterprise,
+  updateEnterprise,
+  listEnterpriseWithType,
+} from "@/api/enterprise/enterprise";
+import { getToken } from "@/utils/auth";
+import { listEtypeAll } from "@/api/etype/etype";
 export default {
   name: "Enterprise",
   data() {
@@ -213,14 +283,15 @@ export default {
         pageSize: 10,
         enterpriseName: null,
         location: null,
-        code: null
+        code: null,
+        typeNum: null
       },
       // 表单参数
       form: {},
       // 表单校验
       rules: {
         enterpriseName: [
-          { required: true, message: "企业名称不能为空", trigger: "blur" }
+          { required: true, message: "企业名称不能为空", trigger: "blur" },
         ],
       },
       upload: {
@@ -237,7 +308,9 @@ export default {
         url: process.env.VUE_APP_BASE_API + "/enterprise/enterprise/importData",
       },
       // 企业名称提示列表
-      enterpriseNameSuggestions: []
+      enterpriseNameSuggestions: [],
+      // 企业分类列表
+      enterTypeList: [],
     };
   },
   created() {
@@ -247,11 +320,15 @@ export default {
     /** 查询enterprise列表 */
     getList() {
       this.loading = true;
-      listEnterpriseWithType(this.queryParams).then(response => {
+      listEnterpriseWithType(this.queryParams).then((response) => {
         this.enterpriseList = response.rows;
         this.total = response.total;
         this.loading = false;
       });
+      listEtypeAll().then((res) => {
+        this.enterTypeList = res;
+        console.log(this.enterTypeList)
+      });
     },
     // 取消按钮
     cancel() {
@@ -264,7 +341,8 @@ export default {
         id: null,
         enterpriseName: null,
         location: null,
-        code: null
+        code: null,
+        typeNum: null
       };
       this.resetForm("form");
     },
@@ -280,9 +358,9 @@ export default {
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.id)
-      this.single = selection.length!==1
-      this.multiple = !selection.length
+      this.ids = selection.map((item) => item.id);
+      this.single = selection.length !== 1;
+      this.multiple = !selection.length;
     },
     /** 新增按钮操作 */
     handleAdd() {
@@ -293,25 +371,28 @@ export default {
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
-      const id = row.id || this.ids
-      getEnterprise(id).then(response => {
+      const id = row.id || this.ids;
+      getEnterprise(id).then((response) => {
         this.form = response.data;
+        // console.log(this.form)
         this.open = true;
         this.title = "修改企业实体数据";
       });
     },
     /** 提交按钮 */
     submitForm() {
-      this.$refs["form"].validate(valid => {
+      this.$refs["form"].validate((valid) => {
         if (valid) {
+          this.form.typeName = this.keyToChinese(this.form.typeNum);
+          // console.log(this.form);
           if (this.form.id != null) {
-            updateEnterprise(this.form).then(response => {
+            updateEnterprise(this.form).then((response) => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
             });
           } else {
-            addEnterprise(this.form).then(response => {
+            addEnterprise(this.form).then((response) => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
               this.getList();
@@ -323,18 +404,30 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除编号为"' + ids + '"的企业？这将会删除所有关于这家企业的数据').then(function() {
-        return delEnterprise(ids);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      this.$modal
+        .confirm(
+          '是否确认删除编号为"' +
+            ids +
+            '"的企业？这将会删除所有关于这家企业的数据'
+        )
+        .then(function () {
+          return delEnterprise(ids);
+        })
+        .then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {});
     },
     /** 导出按钮操作 */
     handleExport() {
-      this.download('enterprise/enterprise/export', {
-        ...this.queryParams
-      }, `enterprise_${new Date().getTime()}.xlsx`)
+      this.download(
+        "enterprise/enterprise/export",
+        {
+          ...this.queryParams,
+        },
+        `enterprise_${new Date().getTime()}.xlsx`
+      );
     },
     handleImport() {
       this.upload.title = "企业（分类）数据导入";
@@ -364,24 +457,32 @@ export default {
     submitFileForm() {
       this.$refs.upload.submit();
     },
-  // 企业名称模糊查询
-  performEnterpriseNameSearch() {
-    const searchTerm = this.queryParams.enterpriseName;
-    if (searchTerm.length) {
-      console.log(searchTerm);
-      const filteredData = this.enterpriseList.filter(item => item.enterpriseName.includes(searchTerm));
-      this.enterpriseNameSuggestions = filteredData.map(item => item.enterpriseName);
-    } else {
+    // 企业名称模糊查询
+    performEnterpriseNameSearch() {
+      const searchTerm = this.queryParams.enterpriseName;
+      if (searchTerm.length) {
+        console.log(searchTerm);
+        const filteredData = this.enterpriseList.filter((item) =>
+          item.enterpriseName.includes(searchTerm)
+        );
+        this.enterpriseNameSuggestions = filteredData.map(
+          (item) => item.enterpriseName
+        );
+      } else {
+        this.enterpriseNameSuggestions = [];
+      }
+      console.log(this.enterpriseNameSuggestions);
+    },
+    selectEnterpriseName(suggestion) {
+      this.queryParams.enterpriseName = suggestion;
       this.enterpriseNameSuggestions = [];
-    }
-    console.log(this.enterpriseNameSuggestions);
+      this.handleQuery();
+    },
+    keyToChinese(num) {
+      const item = this.enterTypeList.find(element => element.number === num);
+      return item ? item.name : null;
+    },
   },
-  selectEnterpriseName(suggestion) {
-    this.queryParams.enterpriseName = suggestion;
-    this.enterpriseNameSuggestions = [];
-    this.handleQuery();
-  }
-  }
 };
 </script>