factory_web/src/views/vm/visit_form.vue

<template>
  <el-drawer :title="titleMap[mode]" v-model="visible" :size="1000" destroy-on-close @closed="$emit('closed')">
    <el-container v-loading="loading">
      <el-main style="padding: 0 20px 20px 20px">
        <el-form ref="dialogForm" :model="form" :rules="rules" :disabled="mode == 'show'" label-width="100px">
          <el-row>
            <el-col :md="24" :sm="12" :xs="24">
              <el-form-item label="来访事由">
                <el-select v-model="form.purpose" placeholder="选择来访事由">
                  <el-option v-for="item in purposeoptions" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :md="24" :sm="12" :xs="24">
              <el-form-item label="来访概述">
                <el-input v-model="form.name" type="text" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :md="24" :sm="12" :xs="24">
              <el-form-item label="来访详述">
                <el-input v-model="form.description" type="text" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :md="12" :sm="12" :xs="24">
              <el-form-item label="来访时间">
                <el-date-picker v-model="form.visit_time" type="datetime" placeholder="选择来访时间" />
              </el-form-item>
            </el-col>

            <el-col :md="12" :sm="12" :xs="24">
              <el-form-item label="离开时间">
                <el-date-picker v-model="form.leave_time" type="datetime" placeholder="选择离开时间" />
              </el-form-item>
            </el-col>
            <el-col :md="12" :sm="24" :xs="24">
              <el-form-item label="接待人">
                <span style="display:flex">
                  <el-input readonly v-model="receptionist_name"></el-input>
                  <!-- <el-select v-model="form.receptionist" disabled placeholder="选择接待人">
                  <el-option
                    v-for="item in receptionistoptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select> -->
                  <ehsUserSelect :multiple="false" @submit="getReceptionist">
                  </ehsUserSelect>
                </span>
              </el-form-item>
            </el-col>
            <el-col :md="24" :sm="12" :xs="24">
              <el-form-item label="来访单位">
                <el-input v-model="form.company" type="text" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :md="12" :sm="24" :xs="24">
              <el-form-item label="来访级别">
                <el-radio-group v-model="form.level">
                  <el-radio-button label="10">一般</el-radio-button>
                  <el-radio-button label="20">重要</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :md="12" :sm="12" :xs="24">
              <el-form-item label="来访人数">
                <el-input-number v-model="form.count_people" :min="0" :max="32767"
                  controls-position="right"></el-input-number>




              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-main>
      <el-footer>
        <el-button type="primary" :loading="isSaveing" @click="submit">保存</el-button>
        <el-button @click="visible = false">取消</el-button>
      </el-footer>
    </el-container>
  </el-drawer>
</template>

<script>
import { genTree } from "@/utils/verificate";
export default {
  emits: ["success", "closed"],
  data() {
    return {
      loading: false,
      mode: "add",
      titleMap: {
        add: "新增",
        edit: "编辑",
        show: "查看",
      },
      form: {},
      rules: {
        purpose: [{ required: true, message: "请输入" }],
        name: [{ required: true, message: "来访概述" }],
        visit_time: [{ required: true, message: "请输入" }],
        leave_time: [{ required: true, message: "请输入" }],
        receptionist: [{ required: true, message: "请输入" }],
        level: [{ required: true, message: "请输入" }]
      },
      visible: false,
      isSaveing: false,
      selectionFilters: [],
      setFiltersVisible: false,
      purposeoptions: [
        { name: "售后服务", id: 2 },
        { name: "业务洽谈", id: 4 },
        { id: 10, name: "参观" },
        { id: 20, name: "拜访" },
        { id: 30, name: "面试" },
        { id: 40, name: "开会" },
        { id: 50, name: "货车司机" },
      ],

      receptionist_name: null,
    };
  },
  mounted() {

  },
  methods: {

    //显示
    open(mode = "add") {
      this.mode = mode;
      this.visible = true;
      return this;
    },



    getReceptionist(data) {
      // 子组件调用父组件的方法并传参
      this.form.receptionist = data.id;
      this.receptionist_name = data.name
    },


    //表单提交方法
    submit() {
      this.$refs.dialogForm.validate(async (valid) => {
        if (valid) {
          this.isSaveing = true;
          try {
            var res;
            if (this.mode == "add") {
              res = await this.$API.vm.visit.create.req(this.form);
              console.log(this.form);
            } else if (this.mode == "edit") {
              res = await this.$API.vm.visit.update.req(
                this.form.id,
                this.form
              );
            }
            this.isSaveing = false;
            this.$emit("success", this.form, this.mode);
            this.visible = false;
            this.$message.success("操作成功");
            return res;
          } catch (err) {
            //可以处理校验错误
            this.isSaveing = false;
            return err;
          }
        }
      });
    },
    //表单注入数据
    setData(data) {
      // this.loading = true
      // const params = {
      // 	id: data.id
      // }
      // setTimeout(async ()=>{
      // 	var res = await this.$API.system.table.info.get(params)
      // 	this.loading = false
      // 	this.form = res.data
      // },400)
      Object.assign(this.form, data);
    },
    //设置过滤项
    setFilters(filters) {
      this.selectionFilters = filters;
      this.setFiltersVisible = true;
    },
  },
};
</script>

<style scoped>
.el-transfer {
  --el-transfer-panel-width: 345px !important;
}
</style>