|
|
@@ -0,0 +1,452 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <div class="filter-container">
|
|
|
+ <span>
|
|
|
+ <span> {{ $t("_ad.table.0") }}: </span>
|
|
|
+ <span>
|
|
|
+ <el-input
|
|
|
+ class="search-item"
|
|
|
+ v-model="queryParams.model.customerName"
|
|
|
+ :placeholder="$t('_ad.table.0')"
|
|
|
+ />
|
|
|
+ </span>
|
|
|
+
|
|
|
+ <span> {{ $t("_ad.status") }}: </span>
|
|
|
+ <span>
|
|
|
+ <el-select
|
|
|
+ v-model="queryParams.model.customerStatus"
|
|
|
+ :placeholder="$t('_ad.status')"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ <!--操作按钮-->
|
|
|
+ <span>
|
|
|
+ <el-button @click="search" plain type="primary">
|
|
|
+ {{ $t("table.search") }}
|
|
|
+ </el-button>
|
|
|
+ <el-button @click="reset" plain type="warning">
|
|
|
+ {{ $t("table.reset") }}
|
|
|
+ </el-button>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 添加修改删除-->
|
|
|
+ <el-row class="filter-container">
|
|
|
+ <el-col>
|
|
|
+ <!--添加按钮，调用add方法-->
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-plus"
|
|
|
+ size="medium"
|
|
|
+ @click="add"
|
|
|
+ >{{ $t("common.add") }}</el-button
|
|
|
+ >
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-table
|
|
|
+ :data="tableData.records"
|
|
|
+ :key="tableKey"
|
|
|
+ @cell-click="cellClick"
|
|
|
+ @filter-change="filterChange"
|
|
|
+ @selection-change="onSelectChange"
|
|
|
+ @sort-change="sortChange"
|
|
|
+ border
|
|
|
+ fit
|
|
|
+ row-key="id"
|
|
|
+ ref="table"
|
|
|
+ style="width: 100%"
|
|
|
+ v-loading="loading"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ type="index"
|
|
|
+ width="40px"
|
|
|
+ :reserve-selection="true"
|
|
|
+ />
|
|
|
+ <!-- 客户名称 -->
|
|
|
+ <el-table-column
|
|
|
+ :label="$t('_ad.table.0')"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ align="center"
|
|
|
+ prop="customerName"
|
|
|
+ width=""
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.customerName }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <!-- 联系人 -->
|
|
|
+ <el-table-column
|
|
|
+ :label="$t('_ad.table.1')"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ align="center"
|
|
|
+ prop="contactName"
|
|
|
+ width=""
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.contactName }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <!-- 联系手机 -->
|
|
|
+ <el-table-column
|
|
|
+ :label="$t('_ad.table.2')"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ align="center"
|
|
|
+ prop="contactPhone"
|
|
|
+ width=""
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.contactPhone }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <!-- 备注 -->
|
|
|
+ <el-table-column
|
|
|
+ :label="$t('_ad.table.3')"
|
|
|
+ :show-overflow-tooltip="true"
|
|
|
+ align="center"
|
|
|
+ prop="customerRemark"
|
|
|
+ width=""
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.customerRemark}}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ :label="$t('table.operation')"
|
|
|
+ align="center"
|
|
|
+ column-key="operation"
|
|
|
+ class-name="small-padding fixed-width"
|
|
|
+ width="100px"
|
|
|
+ >
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <i
|
|
|
+ @click="edit(row)"
|
|
|
+ class="el-icon-edit table-operation"
|
|
|
+ :title="$t('common.edit')"
|
|
|
+ style="color: #2db7f5"
|
|
|
+ />
|
|
|
+ <i
|
|
|
+ @click="singleDelete(row)"
|
|
|
+ class="el-icon-delete table-operation"
|
|
|
+ :title="$t('common.delete')"
|
|
|
+ style="color: #f50"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <pagination
|
|
|
+ :limit.sync="queryParams.size"
|
|
|
+ :page.sync="queryParams.current"
|
|
|
+ :total="Number(tableData.total)"
|
|
|
+ @pagination="fetch"
|
|
|
+ v-show="tableData.total > 0"
|
|
|
+ />
|
|
|
+ <place-edit
|
|
|
+ :dialog-visible="dialog.isVisible"
|
|
|
+ :type="dialog.type"
|
|
|
+ @close="editClose"
|
|
|
+ @success="editSuccess"
|
|
|
+ ref="edit"
|
|
|
+ />
|
|
|
+ <place-import
|
|
|
+ ref="import"
|
|
|
+ :dialog-visible="fileImport.isVisible"
|
|
|
+ :type="fileImport.type"
|
|
|
+ :action="fileImport.action"
|
|
|
+ accept=".xls,.xlsx"
|
|
|
+ @close="importClose"
|
|
|
+ @success="importSuccess"
|
|
|
+ />
|
|
|
+ <el-dialog
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :close-on-press-escape="true"
|
|
|
+ title="预览"
|
|
|
+ width="80%"
|
|
|
+ top="50px"
|
|
|
+ :visible.sync="preview.isVisible"
|
|
|
+ v-el-drag-dialog
|
|
|
+ >
|
|
|
+ <el-scrollbar>
|
|
|
+ <div v-html="preview.context"></div>
|
|
|
+ </el-scrollbar>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Pagination from "@/components/Pagination";
|
|
|
+import elDragDialog from "@/directive/el-drag-dialog";
|
|
|
+import PlaceEdit from "./components/Edit";
|
|
|
+import placeApi from "@/api/Place.js";
|
|
|
+import { adc } from "@/api/adSomeelse";
|
|
|
+import PlaceImport from "@/components/zuihou/Import";
|
|
|
+import {
|
|
|
+ downloadFile,
|
|
|
+ loadEnums,
|
|
|
+ initDicts,
|
|
|
+ initQueryParams,
|
|
|
+} from "@/utils/commons";
|
|
|
+import { CodeToText, TextToCode } from "element-china-area-data";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "PlaceManage",
|
|
|
+ directives: { elDragDialog },
|
|
|
+ components: { Pagination, PlaceEdit, PlaceImport },
|
|
|
+ filters: {
|
|
|
+ getCodeName(code) {
|
|
|
+ return CodeToText[code];
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ selectedOptions: [],
|
|
|
+ options: [
|
|
|
+ {
|
|
|
+ value: "",
|
|
|
+ name: this.$t("_ad.statusList.0"),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "1",
|
|
|
+ name: this.$t("_ad.statusList.1"),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "0",
|
|
|
+ name: this.$t("_ad.statusList.2"),
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ form: {
|
|
|
+ provinces: "",
|
|
|
+ pCode: "",
|
|
|
+ city: "",
|
|
|
+ cCode: "",
|
|
|
+ area: "",
|
|
|
+ aCode: "",
|
|
|
+ },
|
|
|
+
|
|
|
+ // 编辑
|
|
|
+ dialog: {
|
|
|
+ isVisible: false,
|
|
|
+ type: "add",
|
|
|
+ },
|
|
|
+ // 预览
|
|
|
+ preview: {
|
|
|
+ isVisible: false,
|
|
|
+ context: "",
|
|
|
+ },
|
|
|
+ // 导入
|
|
|
+ fileImport: {
|
|
|
+ isVisible: false,
|
|
|
+ type: "import",
|
|
|
+ action: `${process.env.VUE_APP_BASE_API}/place/place/import`,
|
|
|
+ },
|
|
|
+ tableKey: 0,
|
|
|
+ queryParams: initQueryParams(),
|
|
|
+ selection: [],
|
|
|
+ loading: false,
|
|
|
+ tableData: {
|
|
|
+ total: 0,
|
|
|
+ },
|
|
|
+ // 枚举
|
|
|
+ enums: {},
|
|
|
+ // 字典
|
|
|
+ dicts: {},
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ watch: {},
|
|
|
+ mounted() {
|
|
|
+ this.fetch();
|
|
|
+
|
|
|
+ // 初始化字典和枚举
|
|
|
+ const enumList = [];
|
|
|
+ const dictList = [];
|
|
|
+ loadEnums(enumList, this.enums, "place");
|
|
|
+ initDicts(dictList, this.dicts);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ codeToName(code) {
|
|
|
+ return CodeToText[code];
|
|
|
+ },
|
|
|
+
|
|
|
+ editOne() {
|
|
|
+ if (!this.selection.length) {
|
|
|
+ this.$message({
|
|
|
+ message: this.$t("tips.noDataSelected"),
|
|
|
+ type: "warning",
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (this.selection.length > 1) {
|
|
|
+ this.$message({
|
|
|
+ message: this.$t("tips.mustOne"),
|
|
|
+ type: "warning",
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.edit(this.selection[0]);
|
|
|
+ },
|
|
|
+
|
|
|
+ handleChange() {
|
|
|
+ // this.form.provinces = CodeToText[this.selectedOptions[0]]
|
|
|
+ // this.form.pCode = this.selection[0],
|
|
|
+ // this.form.city = CodeToText[this.selectedOptions[1]],
|
|
|
+ // this.form.cCode = this.selectedOptions[1],
|
|
|
+ // this.form.area = CodeToText[this.selectedOptions[2]]
|
|
|
+ // this.form.aCode = this.selectedOptions[2]
|
|
|
+
|
|
|
+ this.queryParams.model.plcPid = CodeToText[this.selectedOptions[0]];
|
|
|
+ this.queryParams.model.plcCid = CodeToText[this.selectedOptions[1]];
|
|
|
+ this.queryParams.model.plcAid = CodeToText[this.selectedOptions[2]];
|
|
|
+
|
|
|
+ console.log("省市县数据" + JSON.stringify(this.selectedOptions));
|
|
|
+ },
|
|
|
+
|
|
|
+ editClose() {
|
|
|
+ this.dialog.isVisible = false;
|
|
|
+ },
|
|
|
+ editSuccess() {
|
|
|
+ this.search();
|
|
|
+ },
|
|
|
+ onSelectChange(selection) {
|
|
|
+ this.selection = selection;
|
|
|
+ },
|
|
|
+ search() {
|
|
|
+ this.fetch({
|
|
|
+ ...this.queryParams,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ reset() {
|
|
|
+ this.queryParams = initQueryParams();
|
|
|
+ this.selectedOptions = [];
|
|
|
+ this.$refs.table.clearSort();
|
|
|
+ this.$refs.table.clearFilter();
|
|
|
+ this.search();
|
|
|
+ },
|
|
|
+ importExcel() {
|
|
|
+ this.fileImport.type = "upload";
|
|
|
+ this.fileImport.isVisible = true;
|
|
|
+ this.$refs.import.setModel(false);
|
|
|
+ },
|
|
|
+ importSuccess() {
|
|
|
+ this.search();
|
|
|
+ },
|
|
|
+ importClose() {
|
|
|
+ this.fileImport.isVisible = false;
|
|
|
+ },
|
|
|
+ singleDelete(row) {
|
|
|
+ this.$refs.table.clearSelection();
|
|
|
+ this.$refs.table.toggleRowSelection(row, true);
|
|
|
+ this.batchDelete();
|
|
|
+ },
|
|
|
+ batchDelete() {
|
|
|
+ if (!this.selection.length) {
|
|
|
+ this.$message({
|
|
|
+ message: this.$t("tips.noDataSelected"),
|
|
|
+ type: "warning",
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.$confirm(this.$t("tips.confirmDelete"), this.$t("common.tips"), {
|
|
|
+ confirmButtonText: this.$t("common.confirm"),
|
|
|
+ cancelButtonText: this.$t("common.cancel"),
|
|
|
+ type: "warning",
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ const ids = this.selection.map((u) => u.id);
|
|
|
+ this.delete(ids);
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.clearSelections();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ clearSelections() {
|
|
|
+ this.$refs.table.clearSelection();
|
|
|
+ },
|
|
|
+ delete(ids) {
|
|
|
+ adc.delete({ ids: ids }).then((response) => {
|
|
|
+ const res = response.data;
|
|
|
+ if (res.isSuccess) {
|
|
|
+ this.$message({
|
|
|
+ message: this.$t("tips.deleteSuccess"),
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ this.search();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ add() {
|
|
|
+ this.dialog.type = "add";
|
|
|
+ this.dialog.isVisible = true;
|
|
|
+ this.$refs.edit.setPlace(false);
|
|
|
+ // this.selectedOptions=[];
|
|
|
+ },
|
|
|
+ edit(row) {
|
|
|
+ // this.$refs.edit.setPlace({row, enums: this.enums, dicts: this.dicts});
|
|
|
+ this.$refs.edit.setPlace({ row });
|
|
|
+ this.dialog.type = "edit";
|
|
|
+ this.dialog.isVisible = true;
|
|
|
+ },
|
|
|
+ fetch(params = {}) {
|
|
|
+ this.loading = true;
|
|
|
+ this.queryParams.current = params.current
|
|
|
+ ? params.current
|
|
|
+ : this.queryParams.current;
|
|
|
+ this.queryParams.size = params.size ? params.size : this.queryParams.size;
|
|
|
+ adc
|
|
|
+ .page(this.queryParams)
|
|
|
+ .then((response) => {
|
|
|
+ const res = response.data;
|
|
|
+ if (res.isSuccess) {
|
|
|
+ this.tableData = res.data;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .finally(() => (this.loading = false));
|
|
|
+ },
|
|
|
+ sortChange(val) {
|
|
|
+ this.queryParams.sort = val.prop;
|
|
|
+ this.queryParams.order = val.order;
|
|
|
+ if (this.queryParams.sort) {
|
|
|
+ this.search();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ filterChange(filters) {
|
|
|
+ for (const key in filters) {
|
|
|
+ if (key.includes(".")) {
|
|
|
+ const val = {};
|
|
|
+ val[key.split(".")[1]] = filters[key][0];
|
|
|
+ this.queryParams.model[key.split(".")[0]] = val;
|
|
|
+ } else {
|
|
|
+ this.queryParams.model[key] = filters[key][0];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.search();
|
|
|
+ },
|
|
|
+ cellClick(row, column) {
|
|
|
+ if (column["columnKey"] === "operation") {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let flag = false;
|
|
|
+ this.selection.forEach((item) => {
|
|
|
+ if (item.id === row.id) {
|
|
|
+ flag = true;
|
|
|
+ this.$refs.table.toggleRowSelection(row);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ if (!flag) {
|
|
|
+ this.$refs.table.toggleRowSelection(row, true);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped></style>
|
devilhell