factory_web/src/views/am/access_form.vue

<template>
  <el-Dialog
    :title="titleMap[mode]"
    v-model="visible"
    destroy-on-close
    @closed="closeDrawer"
  >
    <el-form
      ref="dialogForm"
      :model="form"
      :rules="rules"
      :disabled="mode === 'show'"
      label-width="120px"
    >
      <el-row>
         <el-col :md="12" :sm="24">
          <el-form-item label="准入类型" prop="type">
            <el-radio-group v-model="form.type">
              <el-radio :label="10">准入</el-radio>
              <el-radio :label="20">禁入</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24">
          <el-form-item label="关联区域" prop="area">
            <el-select v-model="form.area" style="width: 100%">
              <el-option
                v-for="item in areaOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :md="12" :sm="24">
          <el-form-item label="对象类型" prop="obj_cate">
            <el-select
              v-model="form.obj_cate"
              style="width: 100%"
              @change="cateChange"
            >
              <el-option
                v-for="item in cateOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24" v-show="postshow">
          <el-form-item label="关联岗位" prop="post">
            <el-select v-model="form.post" style="width: 100%">
              <el-option
                v-for="item in postOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24" v-show="peopleshow">
          <el-form-item label="关联人员" prop="employee">
            <el-select v-model="form.employee" style="width: 100%">
              <el-option
                v-for="item in employeeOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="24" v-show="orgshow">
          <el-form-item label="关联部门" prop="dept">
            <el-cascader
              v-model="form.dept"
              :options="deptOptions"
              :props="groupsProps"
              clearable
              style="width: 100%"
            >
            </el-cascader>
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="12" :xs="24">
          <el-form-item label="最短停留时间">
            <el-input-number
              v-model="form.stay_minute_min"
              :min="0"
              :max="32767"
              placeholder="分钟"
              controls-position="right"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="12" :xs="24">
          <el-form-item label="最长停留时间">
            <el-input-number
              v-model="form.stay_minute_max"
              :min="0"
              :max="32767"
              placeholder="分钟"
              controls-position="right"
            ></el-input-number>
          </el-form-item>
        </el-col>
       
      </el-row>
    </el-form>
    <template #footer>
      <el-button type="primary" :loading="isSaveing" @click="submit">
        保存
      </el-button>
      <el-button @click="visible = false">取消</el-button>
    </template>
  </el-Dialog>
</template>

<script>
import { genTree } from "@/utils/verificate";
const defaultForm = {
  id: null,
  type: 20,
  obj_cate: "",
};
export default {
  emits: ["success", "closed"],
  data() {
    return {
      loading: false,
      mode: "add",
      titleMap: {
        add: "新增",
        edit: "编辑",
      },
      cateOptions: [
        { id: "post", name: "岗位" },
        { id: "org", name: "单位" },
        { id: "people", name: "人员" },
      ],

      visible: false,
      isSaveing: false,
      form: defaultForm,
      useroptions: [],
      //验证规则
      rules: {
        area: [{ required: true, message: "选择关联区域" }],
        type: [{ required: true, message: "选择准入类型" }],
        obj_cate: [{ required: true, message: " 选择对象类型" }],
      },
      groupsProps: {
        // value: "id",
        multiple: false,
        emitPath: false,
        checkStrictly: true,
      },
      areaOptions: [],
      selectionFilters: [],
      postOptions: [],
      employeeOptions: [],
      deptOptions: [],
       postshow:false,
      orgshow:false,
     peopleshow:false,
    };
  },
  mounted() {
    this.getArea();
    this.getPost();
    this.getEmployee();
    this.getDept();
  },
  methods: {
    //关联区域
    getArea() {
      this.$API.am.area.list.req({ page: 0 }).then((res) => {
        this.areaOptions = res;
      });
    },
    //关联岗位
    getPost() {
      this.$API.system.post.list.req({ page: 0 }).then((res) => {
        this.postOptions = res;
      });
    },
    //关联人员
    getEmployee() {
      this.$API.hrm.employee.list.req({ page: 0 }).then((res) => {
        this.employeeOptions = res;
      });
    },
    //关联部门
    getDept() {
      this.$API.system.dept.list.req({ page: 0 }).then((res) => {
        this.deptOptions = genTree(res);
      });
    },

    //
    cateChange() {
       if (this.form.obj_cate == 'post') {
   
       this.postshow=true;
       this.peopleshow=false;
        this.orgshow=false;
      } else if (this.form.obj_cate == "people") {
        this.postshow=false;
       this.peopleshow=true;
        this.orgshow=false;
      } else {
        this.postshow=false;
       this.peopleshow=false;
        this.orgshow=true;
      }
    },
    //显示
    open(mode) {
      this.mode = mode;
      this.visible = true;
       if (mode == "add") {
        this.form.area = this.$parent.area;
      }
      return this;
    },
    closeDrawer() {
      this.visible = false;
      this.$emit("closed");
    },
    //表单提交方法
    submit() {
      this.$refs.dialogForm.validate((valid) => {
        if (valid) {
          this.isSaveing = true;
          if (this.mode === "add") {
            this.$API.am.access.create
              .req(this.form)
              .then((res) => {
                this.isSaveing = false;
                this.visible = false;
                this.$emit("success", this.form, this.mode);
                this.$message.success("操作成功");
                return res;
              })
              .catch((err) => {
                this.isSaveing = false;
                return err;
              });
          }
        }
      });
    },
    //表单注入数据
    setData(data) {
      console.log(defaultForm);
      // this.form = defaultForm;
      Object.assign(this.form, data);
    },
  },
};
</script>

<style>
</style>