sishitongtang-crm/src/views/finance/component/addCallbacks.vue

<template>
  <div>
    <xy-dialog ref="dialog"
               :is-show.sync="isShow"
               type="form"
               :title="type === 'add' ? '新增回访' : '编辑回访'"
               :form="form"
               :rules="rules"
               @submit="submit">
      <template v-slot:way>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            回访方式 ：
          </div>
          <div class="xy-table-item-content">
            <el-select v-model="form.way"
                       clearable
                       placeholder="请选择回访方式"
                       style="width: 300px;">
              <el-option v-for="item in ways"
                         :key="item.id"
                         :label="item.value"
                         :value="item.id"></el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:is_coherent>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            是否接通 ：
          </div>
          <div class="xy-table-item-content">
            <el-switch v-model="form.is_coherent"
                       :active-value="1"
                       :inactive-value="0"
                       active-text="是"
                       inactive-text="否"
            ></el-switch>
          </div>
        </div>
      </template>
      <template v-slot:visit_time>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>
            回访时间 ：
          </div>
          <div class="xy-table-item-content">
            <el-date-picker v-model="form.visit_time"
                            placeholder="请选择回访时间"
                            style="width: 300px;"
                            type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </div>
        </div>
      </template>
      <template v-slot:is_serve>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            是否服务 ：
          </div>
          <div class="xy-table-item-content">
            <el-switch v-model="form.is_serve"
                       :active-value="1"
                       :inactive-value="0"
                       active-text="是"
                       inactive-text="否"
            ></el-switch>
          </div>
        </div>
      </template>
      <template v-slot:satisfy>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>
            满意度 ：
          </div>
          <div class="xy-table-item-content">
            <el-select v-model="form.satisfy"
                       clearable
                       placeholder="请选择满意度"
                       style="width: 300px;">
              <el-option v-for="item in satisfys"
                         :key="item.id"
                         :label="item.value"
                         :value="item.id"></el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:is_standard>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            服务规范 ：
          </div>
          <div class="xy-table-item-content">
            <el-switch v-model="form.is_standard"
                       :active-value="1"
                       :inactive-value="0"
                       active-text="规范"
                       style="width: 300px;"
                       inactive-text="不规范"
            ></el-switch>
          </div>
        </div>
      </template>
      <template v-slot:remark>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            回访备注 ：
          </div>
          <div class="xy-table-item-content">
            <el-input type="textarea"
                      :autosize="{minRows:2}"
                      v-model="form.remark"
                      clearable
                      placeholder="请输入回访备注"
                      style="width: 300px;"
            ></el-input>
          </div>
        </div>
      </template>
      <template v-slot:file_ids>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            回访照片 ：
          </div>
          <div class="xy-table-item-content">
            <el-upload
              style="width: 320px;"
              class="upload-demo"
              :action="action"
              :on-success="(response, file, fileList) => successHandle(response, file, fileList, 'file_ids')"
              :before-upload="uploadBefore"
              :file-list="file_ids"
              :on-remove="(file, fileList) => removeHande(file, fileList, 'file_ids')"
              list-type="picture-card">
              <i slot="default" class="el-icon-plus"></i>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过20MB</div>
            </el-upload>
          </div>
        </div>
      </template>
    </xy-dialog>
  </div>
</template>

<script>
import { getForm, save } from "@/api/callbacks";
export default {
  props: {
    ways: {
      type: Array,
      default: () => [
        {
          id: 1,
          value: "上门"
        },
        {
          id: 2,
          value: "电话"
        }
      ],
    },
    satisfys: {
      type: Array,
      default: () => [
        {
          id: 1,
          value: "非常满意"
        },
        {
          id: 2,
          value: "满意"
        },
        {
          id: 3,
          value: "一般"
        },
        {
          id: 4,
          value: "不满意"
        }
      ],
    },
  },
  data() {
    return {
      isShow: false,
      id: "",
      type: "",
      action: process.env.VUE_APP_UPLOAD_API,
      file_ids: [],

      form: {
        schedule_list_id: "",
        way: "",
        is_coherent: "",
        visit_time: "",
        is_serve: "",
        satisfy: "",
        is_standard: "",
        remark: "",
        file_ids: "",
      },
      rules: {
        visit_time: [
          {
            required: true,
            message: "请填写回访时间",
          },
        ],
        satisfy: [
          {
            required: true,
            message: "请填写满意度",
          },
        ],
      },
    };
  },
  methods: {
    show() {
      this.isShow = true;
    },
    hidden() {
      this.isShow = false;
    },
    init() {
      for (let key in this.form) {
        if (this.form[key] instanceof Array) {
          this.form[key] = [];
        } else {
          this.form[key] = "";
        }
      }
      this.$refs["dialog"].clearValidate();
    },
    setId(id) {
      if (typeof id == "number") {
        this.id = id;
      } else {
        console.error("error typeof id: " + typeof id);
      }
    },
    getId() {
      return this.id;
    },
    setType(type = "add") {
      let types = ["add", "editor"];
      if (types.includes(type)) {
        this.type = type;
      } else {
        console.warn("Unknown type: " + type);
      }
    },
    setForm(key = [], value = []) {
      if (key instanceof Array) {
        key.forEach((key, index) => {
          this.form[key] = value[index] ?? "";
        });
      }
      if (typeof key === "string") {
        this.form[key] = value;
      }
      if (!key) {
        this.init();
      }
    },

    //上传
    successHandle(response, file, fileList, key) {
      this[key] = fileList;
    },
    removeHande(file, fileList, key) {
      this[key] = fileList;
    },
    uploadBefore(file) {
      console.log(file);
      if (file.size / 1000 > 20 * 1024) {
        this.$message({
          type: "warning",
          message: "上传图片大小超过20MB！",
        });
        return false;
      }
    },

    async getDetail() {
      const res = await getForm(this.id);
      this.$integrateData(this.form, res);
      this.file_ids = res.files.map(i => ({
        url: i.url,
        name: i.original_name,
        response: i
      }))
    },

    submit() {
      if (this.type === "add") {
        if (this.form.hasOwnProperty("id")) {
          delete this.form.id;
        }
      }
      if (this.type === "editor") {
        Object.defineProperty(this.form, "id", {
          value: this.id,
          enumerable: true,
          configurable: true,
          writable: true,
        });
      }
      this.form.file_ids = this.file_ids.map(i => i.response.id)
      save(this.form).then((res) => {
        this.$message({
          type: "success",
          message: this.type === "add" ? "新增回访" : "编辑回访" + "成功",
        });
        this.isShow = false;
        this.$emit("refresh");
      });
    },
  },
  watch: {
    isShow(val) {
      if (val) {
        if (this.type === "editor") {
          this.getDetail();
        }
      } else {
        this.id = "";
        this.type = "";
        this.init();
        this.file_ids = [];
        this.$refs["dialog"].clearValidate();
        delete this.form.id;
      }
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-input__inner {
  text-align: left;
}
</style>