electripper-v2-ui/src/views/bst/customerService/components/CustomerServiceEditDialog.vue

<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="500px"
    append-to-body
    :close-on-click-modal="false"
    @open="handleOpen"
  >
  <el-form ref="form" :model="form" :rules="rules" label-width="80px" v-loading="loading">
    <el-row>
      <form-col :span="span" label="运营区" prop="areaId">
        <area-remote-select v-model="form.areaId" :init-options="initAreaOptions" style="width: 100%;" v-if="!loading"/>
      </form-col>
      <form-col :span="span"  label="姓名" prop="name">
        <el-input v-model="form.name" placeholder="请输入客服姓名" />
      </form-col>
      <form-col :span="span"  label="联系方式" prop="contact">
        <el-input v-model="form.contact" placeholder="请输入客服联系方式" />
      </form-col>
      <form-col :span="span"  label="上班时间" prop="startTime">
        <el-time-picker clearable
                        v-model="form.startTime"
                        type="time"
                        format="HH:mm:ss"
                        value-format="HH:mm:ss"
                        placeholder="选择时间">
        </el-time-picker>
      </form-col>
      <form-col :span="span"  label="下班时间" prop="endTime">
        <el-time-picker clearable
                        v-model="form.endTime"
                        type="time"
                        format="HH:mm:ss"
                        value-format="HH:mm:ss"
                        placeholder="选择时间">
        </el-time-picker>
      </form-col>
      <form-col :span="span"  label="客服状态" prop="isEnabled">
        <el-select v-model="form.isEnabled" placeholder="客服状态" style="width: 100%">
          <el-option
            v-for="dict in dict.type.customer_service_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value">
          </el-option>
        </el-select>
      </form-col>

    </el-row>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button type="primary" @click="submitForm">确 定</el-button>
    <el-button @click="cancel">取 消</el-button>
  </div>
  </el-dialog>

</template>

<script>

    import {getCustomerService,updateCustomerService,addCustomerService} from "@/api/bst/customerService";
    import FormCol from "@/components/FormCol/index.vue";
    import UserInput from "@/components/Business/User/UserInput.vue";
    import AreaRemoteSelect from "@/components/Business/Area/AreaRemoteSelect.vue";
    import {getArea} from "@/api/bst/area";
    export default{
      name:'CustomerServiceEditDialog',
      components: {AreaRemoteSelect,FormCol,UserInput},
      dicts:['customer_service_status'],
      props: {
        visible: {
          type: Boolean,
          default: false
        },
        id: {
          type: [String, Number],
          default: null
        },
        initData: {
          type: Object,
          default: () => ({})
        }
      },
      data() {
        return {
          span: 24,
          title: '',
          form: {},
          loading: false,
          rules:{
            areaId: [
              { required: true, message: "运营区不能为空", trigger: "change" }
            ],
            name: [
              { required: true, message: "姓名不能为空", trigger: "blur" }
            ],
            contact: [
              { required: true, message: "联系方式不能为空", trigger: "blur" },
            ],
            startTime: [
              { required: true, message: "上班时间不能为空", trigger: "change" }
            ],
            endTime: [
              { required: true, message: "下班时间不能为空", trigger: "change" }
            ],
          }
        }
      },
      computed: {
        dialogVisible: {
          get() { return this.visible; },
          set(val) { this.$emit('update:visible', val); }
        },
        initAreaOptions() {
          return [{id: this.form.areaId, name: this.form.areaName}]
        },
      },
        methods: {
          handleOpen() {
            if (this.id == null) {
              this.reset();
              this.title = "新增客服";
            } else {
              this.getDetail();
              this.title = "修改客服";
            }
          },
          reset() {
            this.form = {
              id: null,
              areaId: null,
              name: null,
              contact: null,
              startTime: null,
              endTime: null,
              isEnabled: "1", // 默认启用
              ...this.initData
            };
            this.$nextTick(() => {
              this.$refs.form && this.$refs.form.clearValidate();
            });
          },
          async getDetail() {
            this.loading = true;
            try {
              // 1. 获取客服信息
              const customerRes = await getCustomerService(this.id);
              this.form = customerRes.data;

              // 2. 根据 areaId 获取区域名称
              if (this.form.areaId) {
                const areaRes = await getArea(this.form.areaId); // 替换为实际接口
                this.form.areaName = areaRes.data.name; // 假设接口返回 name 字段
              }
            } catch (error) {
              console.error("加载区域信息失败:", error);
            } finally {
              this.loading = false;
            }
          },
          submitForm() {
            this.$refs.form.validate(valid => {
              if (valid) {
                const promise = this.form.id != null ? updateCustomerService(this.form) : addCustomerService(this.form);
                promise.then(response => {
                  this.$modal.msgSuccess(this.form.id != null ? "修改成功" : "新增成功");
                  this.dialogVisible = false;
                  this.$emit('success');
                });
              }
            });
          },
          cancel() {
            this.dialogVisible = false;
            this.reset();
          }
        }
    }
</script>

<style scoped lang="scss">

</style>