|
|
@@ -0,0 +1,246 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-button size="mini" type="primary" @click="editBtn">{{$t('编 辑')}}</el-button>
|
|
|
+ <el-drawer
|
|
|
+ :title="$t(`编辑终端客户档案`)"
|
|
|
+ :visible.sync="dialogFormVisible"
|
|
|
+ direction="rtl"
|
|
|
+ append-to-body
|
|
|
+ :show-close="false"
|
|
|
+ size="700px"
|
|
|
+ @close="onCancel"
|
|
|
+ >
|
|
|
+ <div class="drawer__panel">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-form
|
|
|
+ :model="form"
|
|
|
+ :rules="rules"
|
|
|
+ ref="form"
|
|
|
+ :label-width="tool.onlyZh('110px')"
|
|
|
+ label-position="right"
|
|
|
+ size="mini"
|
|
|
+ >
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item :label="$t('客户姓名')" prop="name">
|
|
|
+ <el-input v-model="form.name" :placeholder="$t('请输入客户姓名')"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item :label="$t('客户电话')" prop="phonenumber">
|
|
|
+ <el-input v-model="form.phonenumber" :placeholder="$t('请输入客户电话')"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item :label="$t('省市县')">
|
|
|
+ <el-cascader
|
|
|
+ :placeholder="$t('请选择')"
|
|
|
+ style="width: 100%"
|
|
|
+ v-model="regionValue"
|
|
|
+ :options="basicData.data().areaData"
|
|
|
+ @change="cascaderChange"
|
|
|
+ clearable
|
|
|
+ ></el-cascader>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item :label="$t('归属经销商')">
|
|
|
+ <el-popover placement="bottom" trigger="click" v-model="agentVisible" width="400">
|
|
|
+ <div>
|
|
|
+ <el-input
|
|
|
+ size="small"
|
|
|
+ :placeholder="$t('请输入搜索内容')"
|
|
|
+ v-model="searchAgent"
|
|
|
+ @keyup.enter.native="getAgentList"
|
|
|
+ clearable
|
|
|
+ @clear="getAgentList"
|
|
|
+ style="margin-bottom: 10px"
|
|
|
+ ></el-input>
|
|
|
+ <div style="max-height: 300px; overflow-y: auto">
|
|
|
+ <div
|
|
|
+ v-for="item in agentList"
|
|
|
+ :key="item.sa_agentsid"
|
|
|
+ class="agent-item"
|
|
|
+ :class="{ 'agent-item-active': form.sa_agentsid === item.sa_agentsid }"
|
|
|
+ @click="selectAgent(item)"
|
|
|
+ >
|
|
|
+ <p>{{ item.enterprisename }}</p>
|
|
|
+ <small style="color: #999">{{ item.address ? item.address : $t('暂无') }}</small>
|
|
|
+ </div>
|
|
|
+ <el-empty
|
|
|
+ v-if="agentList.length === 0"
|
|
|
+ :description="$t('暂无数据')"
|
|
|
+ :image-size="40"
|
|
|
+ ></el-empty>
|
|
|
+ </div>
|
|
|
+ <div style="text-align: right; margin-top: 10px">
|
|
|
+ <el-button size="mini" @click="agentVisible = false">{{$t('取 消')}}</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-input
|
|
|
+ readonly
|
|
|
+ type="text"
|
|
|
+ slot="reference"
|
|
|
+ size="small"
|
|
|
+ :placeholder="$t('请选择归属经销商')"
|
|
|
+ v-model="form.enterprisename"
|
|
|
+ ></el-input>
|
|
|
+ </el-popover>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item :label="$t('备注')">
|
|
|
+ <el-input type="textarea" v-model="form.remarks" :placeholder="$t('请输入备注')"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-form>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <div class="fixed__btn__panel">
|
|
|
+ <el-button size="small" @click="onCancel" class="normal-btn-width">{{$t('取 消')}}</el-button>
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ type="primary"
|
|
|
+ @click="onSubmit"
|
|
|
+ class="normal-btn-width"
|
|
|
+ >{{$t('确 定')}}</el-button>
|
|
|
+ </div>
|
|
|
+ </el-drawer>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: "terminalCustomerFileEdit",
|
|
|
+ props: ["data"],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dialogFormVisible: false,
|
|
|
+ agentVisible: false,
|
|
|
+ searchAgent: "",
|
|
|
+ agentList: [],
|
|
|
+ regionValue: [],
|
|
|
+ form: {
|
|
|
+ sc_customers_terminalid: 0,
|
|
|
+ name: "",
|
|
|
+ phonenumber: "",
|
|
|
+ province: "",
|
|
|
+ city: "",
|
|
|
+ county: "",
|
|
|
+ remarks: "",
|
|
|
+ sa_agentsid: 0,
|
|
|
+ enterprisename: ""
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ name: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: this.$t("请输入客户姓名"),
|
|
|
+ trigger: "blur"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ phonenumber: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: this.$t("请输入客户电话"),
|
|
|
+ trigger: "blur"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ agentParam: {
|
|
|
+ id: 20210804113001,
|
|
|
+ content: {
|
|
|
+ isExport: false,
|
|
|
+ pageNumber: 1,
|
|
|
+ pageSize: 20,
|
|
|
+ nocache: true,
|
|
|
+ where: {
|
|
|
+ condition: ""
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ editBtn() {
|
|
|
+ this.form = Object.assign({}, this.form, this.data);
|
|
|
+ // 初始化省市县级联值
|
|
|
+ if (this.data.province || this.data.city || this.data.county) {
|
|
|
+ const arr = [];
|
|
|
+ if (this.data.province) arr.push(this.data.province);
|
|
|
+ if (this.data.city) arr.push(this.data.city);
|
|
|
+ if (this.data.county) arr.push(this.data.county);
|
|
|
+ this.regionValue = arr;
|
|
|
+ } else {
|
|
|
+ this.regionValue = [];
|
|
|
+ }
|
|
|
+ this.dialogFormVisible = true;
|
|
|
+ },
|
|
|
+ cascaderChange(val) {
|
|
|
+ if (val && val.length > 0) {
|
|
|
+ this.form.province = val[0] || "";
|
|
|
+ this.form.city = val[1] || "";
|
|
|
+ this.form.county = val[2] || "";
|
|
|
+ } else {
|
|
|
+ this.form.province = "";
|
|
|
+ this.form.city = "";
|
|
|
+ this.form.county = "";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async getAgentList() {
|
|
|
+ this.agentParam.content.where.condition = this.searchAgent;
|
|
|
+ const res = await this.$api.requested(this.agentParam);
|
|
|
+ this.agentList = res.data || [];
|
|
|
+ },
|
|
|
+ selectAgent(item) {
|
|
|
+ this.form.sa_agentsid = item.sa_agentsid;
|
|
|
+ this.form.enterprisename = item.enterprisename;
|
|
|
+ this.agentVisible = false;
|
|
|
+ },
|
|
|
+ onSubmit() {
|
|
|
+ this.$refs["form"].validate(async valid => {
|
|
|
+ if (!valid) return false;
|
|
|
+ const params = {
|
|
|
+ id: 2026060915180202,
|
|
|
+ content: {
|
|
|
+ sc_customers_terminalid: this.form.sc_customers_terminalid,
|
|
|
+ name: this.form.name,
|
|
|
+ phonenumber: this.form.phonenumber,
|
|
|
+ province: this.form.province,
|
|
|
+ city: this.form.city,
|
|
|
+ county: this.form.county,
|
|
|
+ remarks: this.form.remarks,
|
|
|
+ sa_agentsid: this.form.sa_agentsid
|
|
|
+ }
|
|
|
+ };
|
|
|
+ const res = await this.$api.requested(params);
|
|
|
+ this.tool.showMessage(res, () => {
|
|
|
+ this.$emit("onSuccess");
|
|
|
+ this.dialogFormVisible = false;
|
|
|
+ this.$refs["form"].resetFields();
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onCancel() {
|
|
|
+ this.dialogFormVisible = false;
|
|
|
+ this.$refs["form"].resetFields();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {}
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.agent-item {
|
|
|
+ padding: 8px 12px;
|
|
|
+ cursor: pointer;
|
|
|
+ border-bottom: 1px solid #f0f0f0;
|
|
|
+ transition: background-color 0.2s;
|
|
|
+}
|
|
|
+.agent-item:hover {
|
|
|
+ background-color: #f5f7fa;
|
|
|
+}
|
|
|
+.agent-item-active {
|
|
|
+ background-color: #ecf5ff;
|
|
|
+ color: #409eff;
|
|
|
+}
|
|
|
+</style>
|
