前端 省市区

test_client/package-lock.json

@@ -3449,6 +3449,11 @@
       "integrity": "sha1-M1bMoZyIlUTy16le1JzlCKDs9VI=",
       "dev": true
     },
+    "china-area-data": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/china-area-data/-/china-area-data-5.0.1.tgz",
+      "integrity": "sha512-BQDPpiv5Nn+018ekcJK2oSD9PAD+E1bvXB0wgabc//dFVS/KvRqCgg0QOEUt3vBkx9XzB5a9BmkJCEZDBxVjVw=="
+    },
     "chokidar": {
       "version": "2.1.8",
       "resolved": "https://registry.npm.taobao.org/chokidar/download/chokidar-2.1.8.tgz",
@@ -5028,6 +5033,15 @@
       "integrity": "sha1-8Tl6Yzw15yZzDCS+EITNJcPugUg=",
       "dev": true
     },
+    "element-china-area-data": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/element-china-area-data/-/element-china-area-data-5.0.2.tgz",
+      "integrity": "sha512-vLQuvOKJy/uiX7MRHEk3x/j09hipuIl6DJ/C4XFUG7D7Pj3O47sy+Y6aAArM6k9v8cD9UX6e+yz2S4J+IPnZ8g==",
+      "requires": {
+        "china-area-data": "^5.0.1",
+        "lodash-es": "^4.17.15"
+      }
+    },
     "element-ui": {
       "version": "2.13.0",
       "resolved": "https://registry.npm.taobao.org/element-ui/download/element-ui-2.13.0.tgz",
@@ -9884,6 +9898,11 @@
       "integrity": "sha1-tEf2ZwoEVbv+7dETku/zMOoJdUg=",
       "dev": true
     },
+    "lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
     "lodash.defaultsdeep": {
       "version": "4.6.1",
       "resolved": "https://registry.npm.taobao.org/lodash.defaultsdeep/download/lodash.defaultsdeep-4.6.1.tgz?cache=0&sync_timestamp=1562718178896&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flodash.defaultsdeep%2Fdownload%2Flodash.defaultsdeep-4.6.1.tgz",

test_client/package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "axios": "0.18.1",
     "echarts": "^4.7.0",
+    "element-china-area-data": "^5.0.2",
     "element-ui": "2.13.0",
     "file-saver": "^2.0.2",
     "js-cookie": "2.2.0",

test_client/src/views/crm/company.vue

@@ -4,27 +4,35 @@
       <el-input
         v-model="listQuery.search"
         placeholder="输入部门名称进行搜索"
-            style="width: 200px;"
+        style="width: 200px"
         class="filter-item"
         @keyup.enter.native="handleFilter"
       />
-          <el-button type="primary" @click="handleAdd" icon="el-icon-plus" v-if ="checkPermission(['company_create'])">新增</el-button>
+      <el-button
+        type="primary"
+        @click="handleAdd"
+        icon="el-icon-plus"
+        v-if="checkPermission(['company_create'])"
+        >新增</el-button
+      >
       <el-button
         class="filter-item"
         type="primary"
         icon="el-icon-refresh-left"
         @click="resetFilter"
-      >刷新重置</el-button>
+        >刷新重置</el-button
+      >
       <el-button
         type="primary"
         @click="handleTrans"
         v-if="checkPermission(['consumer__transfers'])"
-      >批量移交</el-button>
+        >批量移交</el-button
+      >
     </div>
 
     <el-table
       :data="tableData.results"
-          style="width: 100%;margin-top:10px;"
+      style="width: 100%; margin-top: 10px"
       border
       fit
       v-loading="listLoading"
@@ -43,7 +51,9 @@
       <el-table-column label="所在地区">
         <template slot-scope="scope" v-if="scope.row.geo">
           <span v-if="scope.row.geo.pname">{{ scope.row.geo.pname }}</span>
-              <span v-if="scope.row.geo.cityname">/{{ scope.row.geo.cityname }}</span>
+          <span v-if="scope.row.geo.cityname"
+            >/{{ scope.row.geo.cityname }}</span
+          >
           <span v-if="scope.row.geo.adname">/{{ scope.row.geo.adname }}</span>
         </template>
       </el-table-column>
@@ -79,7 +89,8 @@
               type="primary"
               size="small"
               @click="transfer(scope)"
-              >移交</el-button>
+              >移交</el-button
+            >
           </el-button-group>
         </template>
       </el-table-column>
@@ -91,41 +102,72 @@
       :limit.sync="listQuery.limit"
       @pagination="getList"
     />
-    <el-dialog :visible.sync="dialogVisible" :title="dialogType==='edit'?'编辑单位':'新增单位'" >
+    <el-dialog
-      <el-form :model="company" label-width="80px" label-position="right" :rules="rule1" ref="companyForm">
+      :visible.sync="dialogVisible"
+      :title="dialogType === 'edit' ? '编辑单位' : '新增单位'"
+    >
+      <el-form
+        :model="company"
+        label-width="80px"
+        label-position="right"
+        :rules="rule1"
+        ref="companyForm"
+      >
         <el-form-item label="名称" prop="name">
           <el-input v-model="company.name" placeholder="名称" />
         </el-form-item>
+        <el-form-item label="所在地" prop="regin">
+          <el-cascader
+            size="large"
+            :options="regionData"
+            @change="handleRChange"
+            style="width: 100%"
+            clearable
+            v-model="company.geo_"
+          >
+               
+          </el-cascader>
+        </el-form-item>
       </el-form>
-      <div style="text-align:right;">
+      <div style="text-align: right">
         <el-button type="danger" @click="dialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="confirmCompany('companyForm')">确认</el-button>
+        <el-button type="primary" @click="confirmCompany('companyForm')"
+          >确认</el-button
+        >
       </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import { getCompanyList, createCompany, deleteCompany, updateCompany, transferCompany, transferCompanys } from "@/api/crm";
+import {
+  getCompanyList,
+  createCompany,
+  deleteCompany,
+  updateCompany,
+  transferCompany,
+  transferCompanys,
+} from "@/api/crm";
 import { deepClone } from "@/utils";
 import checkPermission from "@/utils/permission";
-import Pagination from "@/components/Pagination"
+import Pagination from "@/components/Pagination";
-
+import { regionData, CodeToText, TextToCode } from "element-china-area-data";
-
 
 const defaultCompany = {
   id: "",
   name: "",
+  geo: null,
 };
 const listQuery = {
   page: 1,
   limit: 20,
-  search: ""
+  search: "",
-}
+};
 export default {
   components: { Pagination },
   data() {
     return {
+      regionData: regionData,
       selects: [],
       company: {
         id: "",
@@ -152,17 +194,17 @@ export default {
   methods: {
     checkPermission,
     getList() {
-      this.listLoading = true
+      this.listLoading = true;
-      getCompanyList(this.listQuery).then(response => {
+      getCompanyList(this.listQuery).then((response) => {
-        this.tableData = response.data
+        this.tableData = response.data;
-        this.listLoading = false
+        this.listLoading = false;
       });
     },
     resetFilter() {
       this.listQuery = {
         page: 1,
         limit: 20,
-        search: ""
+        search: "",
       };
       this.getList();
     },
@@ -180,6 +222,23 @@ export default {
     },
     handleEdit(scope) {
       this.company = Object.assign({}, scope.row); // copy obj
+      this.company.geo_ = ["", "", ""];
+      if (scope.row.geo) {
+        if (scope.row.geo.pname) {
+          this.company.geo_[0] = TextToCode[scope.row.geo.pname].code;
+          if (scope.row.geo.cityname) {
+            this.company.geo_[1] =
+              TextToCode[scope.row.geo.pname][scope.row.geo.cityname].code;
+            if (scope.row.geo.adname) {
+              this.company.geo_[2] =
+                TextToCode[scope.row.geo.pname][scope.row.geo.cityname][
+                  scope.row.geo.adname
+                ].code;
+            }
+          }
+        }
+      }
+
       this.dialogType = "edit";
       this.dialogVisible = true;
       this.$nextTick(() => {
@@ -190,37 +249,37 @@ export default {
       this.$confirm("确认删除该单位吗?将丢失数据!", "警告", {
         confirmButtonText: "确认",
         cancelButtonText: "取消",
-        type: "error"
+        type: "error",
       })
         .then(async () => {
           await deleteCompany(scope.row.id);
-          this.getList()
+          this.getList();
           this.$message({
             type: "success",
-            message: "成功删除!"
+            message: "成功删除!",
           });
         })
-        .catch(err => {
+        .catch((err) => {
           // console.error(err);
         });
     },
     async confirmCompany(form) {
-      this.$refs[form].validate(valid => {
+      this.$refs[form].validate((valid) => {
         if (valid) {
           const isEdit = this.dialogType === "edit";
           if (isEdit) {
             updateCompany(this.company.id, this.company).then(() => {
               this.getList();
               this.dialogVisible = false;
-              this.$message.success('成功')
+              this.$message.success("成功");
             });
           } else {
-            createCompany(this.company).then(res => {
+            createCompany(this.company).then((res) => {
               // this.company = res.data
               // this.tableData.unshift(this.company)
               this.getList();
               this.dialogVisible = false;
-              this.$message.success('成功')
+              this.$message.success("成功");
             });
           }
         } else {
@@ -229,18 +288,23 @@ export default {
       });
     },
     transfer(scope) {
-        this.$prompt('请输入管理员账号以确认将('+scope.row.name + ')及其学员转交给他', '提示', {
+      this.$prompt(
-          confirmButtonText: '确定',
+        "请输入管理员账号以确认将(" + scope.row.name + ")及其学员转交给他",
-          cancelButtonText: '取消',
+        "提示",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
           // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
           // inputErrorMessage: '邮箱格式不正确'
-        }).then(({ value }) => {
+        }
-          transferCompany(scope.row.id, {'admin':value}).then(res=>{
+      )
-            this.$message.success('转交成功!')
+        .then(({ value }) => {
-            this.getList()
+          transferCompany(scope.row.id, { admin: value }).then((res) => {
-          })
+            this.$message.success("转交成功!");
-        }).catch(() => {      
+            this.getList();
           });
+        })
+        .catch(() => {});
     },
     handleSelectionChange(val) {
       let selects = [];
@@ -249,27 +313,47 @@ export default {
       }
       this.selects = selects;
     },
+    handleRChange(val) {
+      if (val[0] != "") {
+        this.company.geo.pname = CodeToText[val[0]];
+        if (val[1] != "") {
+          this.company.geo.cityname = CodeToText[val[1]];
+          if (val[2] != "") {
+            this.company.geo.adname = CodeToText[val[2]];
+          }
+        }
+      }
+    },
     handleTrans() {
       if (this.selects.length) {
-        this.$prompt('请输入管理员账号以确认将'+this.selects.length + '家企业及其学员转交给他', '提示', {
+        this.$prompt(
-          confirmButtonText: '确定',
+          "请输入管理员账号以确认将" +
-          cancelButtonText: '取消',
+            this.selects.length +
+            "家企业及其学员转交给他",
+          "提示",
+          {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
             // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
             // inputErrorMessage: '邮箱格式不正确'
-        }).then(({ value }) => {
+          }
-          transferCompanys({admin:value, companys:this.selects}).then(res=>{
+        )
-            this.$message.success('转交成功!')
+          .then(({ value }) => {
-            this.getList()
+            transferCompanys({ admin: value, companys: this.selects }).then(
+              (res) => {
+                this.$message.success("转交成功!");
+                this.getList();
+              }
+            );
           })
-        }).catch(() => {      
+          .catch(() => {});
-        });
       } else {
         this.$message({
           message: "请先选择",
           type: "warning",
         });
       }
-      }
+    },
-  }
+  },
 };
 </script>

test_client/src/views/crm/companychose.vue

@@ -32,9 +32,13 @@
           <el-table-column label="单位名称">
             <template slot-scope="scope">{{ scope.row.name }}</template>
           </el-table-column>
-          <el-table-column label="创建日期">
+          <el-table-column label="所在地区">
-            <template slot-scope="scope">
+        <template slot-scope="scope" v-if="scope.row.geo">
-              <span>{{ scope.row.create_time }}</span>
+          <span v-if="scope.row.geo.pname">{{ scope.row.geo.pname }}</span>
+          <span v-if="scope.row.geo.cityname"
+            >/{{ scope.row.geo.cityname }}</span
+          >
+          <span v-if="scope.row.geo.adname">/{{ scope.row.geo.adname }}</span>
         </template>
       </el-table-column>
           <el-table-column align="center" label="操作">