前端 省市区

This commit is contained in:
caoqianming 2021-04-01 13:10:27 +08:00
parent c2c0d01730
commit 0827bd6f95
4 changed files with 243 additions and 135 deletions

View File

@ -3449,6 +3449,11 @@
"integrity": "sha1-M1bMoZyIlUTy16le1JzlCKDs9VI=", "integrity": "sha1-M1bMoZyIlUTy16le1JzlCKDs9VI=",
"dev": true "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": { "chokidar": {
"version": "2.1.8", "version": "2.1.8",
"resolved": "https://registry.npm.taobao.org/chokidar/download/chokidar-2.1.8.tgz", "resolved": "https://registry.npm.taobao.org/chokidar/download/chokidar-2.1.8.tgz",
@ -5028,6 +5033,15 @@
"integrity": "sha1-8Tl6Yzw15yZzDCS+EITNJcPugUg=", "integrity": "sha1-8Tl6Yzw15yZzDCS+EITNJcPugUg=",
"dev": true "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": { "element-ui": {
"version": "2.13.0", "version": "2.13.0",
"resolved": "https://registry.npm.taobao.org/element-ui/download/element-ui-2.13.0.tgz", "resolved": "https://registry.npm.taobao.org/element-ui/download/element-ui-2.13.0.tgz",
@ -9884,6 +9898,11 @@
"integrity": "sha1-tEf2ZwoEVbv+7dETku/zMOoJdUg=", "integrity": "sha1-tEf2ZwoEVbv+7dETku/zMOoJdUg=",
"dev": true "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": { "lodash.defaultsdeep": {
"version": "4.6.1", "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", "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",

View File

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

View File

@ -1,138 +1,180 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<div style="margin-top:10px"> <div style="margin-top: 10px">
<el-input <el-input
v-model="listQuery.search" v-model="listQuery.search"
placeholder="输入部门名称进行搜索" placeholder="输入部门名称进行搜索"
style="width: 200px;" style="width: 200px"
class="filter-item" class="filter-item"
@keyup.enter.native="handleFilter" @keyup.enter.native="handleFilter"
/> />
<el-button type="primary" @click="handleAdd" icon="el-icon-plus" v-if ="checkPermission(['company_create'])">新增</el-button> <el-button
<el-button type="primary"
@click="handleAdd"
icon="el-icon-plus"
v-if="checkPermission(['company_create'])"
>新增</el-button
>
<el-button
class="filter-item" class="filter-item"
type="primary" type="primary"
icon="el-icon-refresh-left" icon="el-icon-refresh-left"
@click="resetFilter" @click="resetFilter"
>刷新重置</el-button> >刷新重置</el-button
>
<el-button <el-button
type="primary" type="primary"
@click="handleTrans" @click="handleTrans"
v-if="checkPermission(['consumer__transfers'])" v-if="checkPermission(['consumer__transfers'])"
>批量移交</el-button> >批量移交</el-button
</div> >
</div>
<el-table
:data="tableData.results" <el-table
style="width: 100%;margin-top:10px;" :data="tableData.results"
border style="width: 100%; margin-top: 10px"
fit border
v-loading="listLoading" fit
highlight-current-row v-loading="listLoading"
max-height="600" highlight-current-row
row-key="id" max-height="600"
default-expand-all row-key="id"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}" default-expand-all
@selection-change="handleSelectionChange" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
> @selection-change="handleSelectionChange"
<el-table-column type="selection" width="40"></el-table-column> >
<el-table-column label="单位名称"> <el-table-column type="selection" width="40"></el-table-column>
<template slot-scope="scope">{{ scope.row.name }}</template> <el-table-column label="单位名称">
</el-table-column> <template slot-scope="scope">{{ scope.row.name }}</template>
</el-table-column>
<el-table-column label="所在地区">
<template slot-scope="scope" v-if="scope.row.geo"> <el-table-column label="所在地区">
<span v-if="scope.row.geo.pname">{{ scope.row.geo.pname }}</span> <template slot-scope="scope" v-if="scope.row.geo">
<span v-if="scope.row.geo.cityname">/{{ scope.row.geo.cityname }}</span> <span v-if="scope.row.geo.pname">{{ scope.row.geo.pname }}</span>
<span v-if="scope.row.geo.adname">/{{ scope.row.geo.adname }}</span> <span v-if="scope.row.geo.cityname"
</template> >/{{ scope.row.geo.cityname }}</span
</el-table-column> >
<el-table-column label="创建日期"> <span v-if="scope.row.geo.adname">/{{ scope.row.geo.adname }}</span>
<template slot-scope="scope"> </template>
<span>{{ scope.row.create_time }}</span> </el-table-column>
</template> <el-table-column label="创建日期">
</el-table-column> <template slot-scope="scope">
<el-table-column label="所属"> <span>{{ scope.row.create_time }}</span>
<template slot-scope="scope"> </template>
<span>{{ scope.row.create_admin_name }}</span> </el-table-column>
</template> <el-table-column label="所属">
</el-table-column> <template slot-scope="scope">
<el-table-column align="center" label="操作" fixed="right"> <span>{{ scope.row.create_admin_name }}</span>
<template slot-scope="scope"> </template>
<el-button-group> </el-table-column>
<el-button <el-table-column align="center" label="操作" fixed="right">
type="primary" <template slot-scope="scope">
size="small" <el-button-group>
@click="handleEdit(scope)" <el-button
icon="el-icon-edit" type="primary"
:disabled="!checkPermission(['company_update'])" size="small"
></el-button> @click="handleEdit(scope)"
<el-button icon="el-icon-edit"
type="danger" :disabled="!checkPermission(['company_update'])"
size="small" ></el-button>
@click="handleDelete(scope)" <el-button
icon="el-icon-delete" type="danger"
:disabled="!checkPermission(['company_delete'])" size="small"
></el-button> @click="handleDelete(scope)"
<el-button icon="el-icon-delete"
:disabled="!checkPermission(['company_delete'])"
></el-button>
<el-button
v-if="checkPermission(['company_transfer'])" v-if="checkPermission(['company_transfer'])"
type="primary" type="primary"
size="small" size="small"
@click="transfer(scope)" @click="transfer(scope)"
>移交</el-button> >移交</el-button
</el-button-group> >
</template> </el-button-group>
</el-table-column> </template>
</el-table> </el-table-column>
</el-table>
<pagination <pagination
v-show="tableData.count>0" v-show="tableData.count > 0"
:total="tableData.count" :total="tableData.count"
:page.sync="listQuery.page" :page.sync="listQuery.page"
:limit.sync="listQuery.limit" :limit.sync="listQuery.limit"
@pagination="getList" @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-form-item label="名称" prop="name">
<el-input v-model="company.name" placeholder="名称" /> <el-input v-model="company.name" placeholder="名称" />
</el-form-item> </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> </el-form>
<div style="text-align:right;"> <div style="text-align: right">
<el-button type="danger" @click="dialogVisible=false">取消</el-button> <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> </div>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <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 { deepClone } from "@/utils";
import checkPermission from "@/utils/permission"; 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 = { const defaultCompany = {
id: "", id: "",
name: "", name: "",
}; geo: null,
};
const listQuery = { const listQuery = {
page: 1, page: 1,
limit: 20, limit: 20,
search: "" search: "",
} };
export default { export default {
components: { Pagination }, components: { Pagination },
data() { data() {
return { return {
selects:[], regionData: regionData,
selects: [],
company: { company: {
id: "", id: "",
name: "", name: "",
}, },
listQuery:listQuery, listQuery: listQuery,
tableData: {count:0}, tableData: { count: 0 },
listLoading: true, listLoading: true,
dialogVisible: false, dialogVisible: false,
dialogType: "new", dialogType: "new",
@ -152,17 +194,17 @@ export default {
methods: { methods: {
checkPermission, checkPermission,
getList() { 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() { resetFilter() {
this.listQuery = { this.listQuery = {
page: 1, page: 1,
limit: 20, limit: 20,
search: "" search: "",
}; };
this.getList(); this.getList();
}, },
@ -180,6 +222,23 @@ export default {
}, },
handleEdit(scope) { handleEdit(scope) {
this.company = Object.assign({}, scope.row); // copy obj 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.dialogType = "edit";
this.dialogVisible = true; this.dialogVisible = true;
this.$nextTick(() => { this.$nextTick(() => {
@ -190,37 +249,37 @@ export default {
this.$confirm("确认删除该单位吗?将丢失数据!", "警告", { this.$confirm("确认删除该单位吗?将丢失数据!", "警告", {
confirmButtonText: "确认", confirmButtonText: "确认",
cancelButtonText: "取消", cancelButtonText: "取消",
type: "error" type: "error",
}) })
.then(async () => { .then(async () => {
await deleteCompany(scope.row.id); await deleteCompany(scope.row.id);
this.getList() this.getList();
this.$message({ this.$message({
type: "success", type: "success",
message: "成功删除!" message: "成功删除!",
}); });
}) })
.catch(err => { .catch((err) => {
// console.error(err); // console.error(err);
}); });
}, },
async confirmCompany(form) { async confirmCompany(form) {
this.$refs[form].validate(valid => { this.$refs[form].validate((valid) => {
if (valid) { if (valid) {
const isEdit = this.dialogType === "edit"; const isEdit = this.dialogType === "edit";
if (isEdit) { if (isEdit) {
updateCompany(this.company.id, this.company).then(() => { updateCompany(this.company.id, this.company).then(() => {
this.getList(); this.getList();
this.dialogVisible = false; this.dialogVisible = false;
this.$message.success('成功') this.$message.success("成功");
}); });
} else { } else {
createCompany(this.company).then(res => { createCompany(this.company).then((res) => {
// this.company = res.data // this.company = res.data
// this.tableData.unshift(this.company) // this.tableData.unshift(this.company)
this.getList(); this.getList();
this.dialogVisible = false; this.dialogVisible = false;
this.$message.success('成功') this.$message.success("成功");
}); });
} }
} else { } else {
@ -229,47 +288,72 @@ export default {
}); });
}, },
transfer(scope) { 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])?/, // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
// inputErrorMessage: '' // 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();
}); });
}, })
handleSelectionChange(val) { .catch(() => {});
},
handleSelectionChange(val) {
let selects = []; let selects = [];
for (var i = 0; i < val.length; i++) { for (var i = 0; i < val.length; i++) {
selects.push(val[i].id); selects.push(val[i].id);
} }
this.selects = selects; this.selects = selects;
}, },
handleTrans() { 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) { if (this.selects.length) {
this.$prompt('请输入管理员账号以确认将'+this.selects.length + '家企业及其学员转交给他', '提示', { this.$prompt(
confirmButtonText: '确定', "请输入管理员账号以确认将" +
cancelButtonText: '取消', this.selects.length +
// inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/, "家企业及其学员转交给他",
// inputErrorMessage: '' "提示",
}).then(({ value }) => { {
transferCompanys({admin:value, companys:this.selects}).then(res=>{ confirmButtonText: "确定",
this.$message.success('转交成功!') cancelButtonText: "取消",
this.getList() // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
// inputErrorMessage: ''
}
)
.then(({ value }) => {
transferCompanys({ admin: value, companys: this.selects }).then(
(res) => {
this.$message.success("转交成功!");
this.getList();
}
);
}) })
}).catch(() => { .catch(() => {});
});
} else { } else {
this.$message({ this.$message({
message: "请先选择", message: "请先选择",
type: "warning", type: "warning",
}); });
} }
} },
} },
}; };
</script> </script>

View File

@ -32,11 +32,15 @@
<el-table-column label="单位名称"> <el-table-column label="单位名称">
<template slot-scope="scope">{{ scope.row.name }}</template> <template slot-scope="scope">{{ scope.row.name }}</template>
</el-table-column> </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>
</template> <span v-if="scope.row.geo.cityname"
</el-table-column> >/{{ 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="操作"> <el-table-column align="center" label="操作">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button