factory_web/src/views/vm/visit_detial.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>
        <el-card header="基本信息" shadow="hover">
          <el-descriptions :column="2">
            <el-descriptions-item label="来访概述:">{{
              form.name
            }}</el-descriptions-item>
            <el-descriptions-item label="来访单位:">{{
              form.company
            }}</el-descriptions-item>
            <el-descriptions-item label="来访人数:">
              <el-tag size="small">{{ form.count_people }}人</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="来访人员:">
              <el-tag
                size="small"
                v-for="item in form.visitors_"
                :key="item.id"
                >{{ item.visitor_.name }}</el-tag
              >
            </el-descriptions-item>
            <el-descriptions-item label="状态:">{{
              state_[form.state]
            }}</el-descriptions-item>
            <el-descriptions-item label="来访时间:">{{
              form.visit_time
            }}</el-descriptions-item>
            <el-descriptions-item label="离开时间:">{{
              form.leave_time
            }}</el-descriptions-item>
            <el-descriptions-item label="来访事由:">{{
              purpose_[form.purpose]
            }}</el-descriptions-item>
            <el-descriptions-item label="来访详述:">{{
              form.description
            }}</el-descriptions-item>

            <el-descriptions-item label="接待人:" v-if="form.receptionist_">
              {{ form.receptionist_.name }}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
        <el-card style="margin-top: 8px" shadow="hover" header="访客信息">
          <scTable
            ref="table"
            :data="peoplelist"
            row-key="id"
            height="auto"
            stripe
            hideDo
            hidePagination
          >
            <el-table-column
              label="#"
              fixed="left"
              type="index"
              width="50"
            ></el-table-column>

            <el-table-column
              label="访客姓名"
              prop="visitor_.name"
            ></el-table-column>
            <el-table-column
              label="访客手机号"
              prop="visitor_.phone"
            ></el-table-column>
            <el-table-column
              label="访客身份证号"
              prop="visitor_.id_number"
            ></el-table-column>
            <el-table-column label="是否重要访客" prop="is_main">
              <template #default="scope"
                ><el-space v-if="scope.row.is_main == true">是</el-space>
                <el-space v-else>否</el-space>
              </template>
            </el-table-column>
            <el-table-column
              label="创建时间"
              prop="create_time"
            ></el-table-column>
            <el-table-column label="操作" width="60">
					<template #default="scope">
							<el-button link
								v-if="scope.row.blt_==null"
								type="primary"
								size="small"
								@click="bindCard(scope.row,10)"
								v-auth="'visit.update'"
							>绑卡
							</el-button>
					</template>
				</el-table-column>
          </scTable>
        </el-card>
      </el-main>
      <ScBind v-model="showBindBlt" :bindBtl="bindBtl" 
      :bindType="bindType" :bindName="bindName" 
      :bindEmployee="bindEmployee"
      @success="showBindBltSuccess" @closed="showBindBltClose"></ScBind>
    </el-container>
  </el-drawer>
</template>

<script>
  import ScBind from "@/components/scBind/index.vue";
  export default {
  emits: ["success", "closed"],
  components: {
    ScBind
  },
  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: "请输入" }],
      },
      bindName: "",
      bindType:10,
      bindBtl:null,
      bindEmployee:'',
      visible: false,
      isSaveing: false,
      showBindBlt:false,
      selectionFilters: [],
      setFiltersVisible: false,
      purposeoptions: [
        { id: 10, name: "参观" },
        { id: 20, name: "拜访" },
        { id: 30, name: "面试" },
        { id: 40, name: "开会" },
      ],
      purpose_: {
        10: "参观",
        20: "拜访",
        30: "面试",
        40: "开会",
      },
      state_: {
        10: "创建中",
        20: "审批中",
        30: "待入厂",
        40: "进行中",
        50: "已完成",
      },
      receptionistoptions: [],
      peoplelist: [],
    };
  },
  mounted() {
  },
  methods: {
 //显示
 open(mode = "add") {
      this.mode = mode;
      this.visible = true;
      return this;
    },

    //访客绑卡
    bindCard(row,type){
      debugger;
      if(row.visitor_.employee==null){
        this.$message.success("请审批通过后再进行绑卡操作");
      }else{
        debugger;
        this.bindName = row.visitor_.name;
        this.bindType = type;
        this.bindEmployee = row.visitor_.employee;
      if (type === 20) {
        this.bindBtl = row.blt_.mac;
      }
      this.showBindBlt = true;
      }
      
    
    },
    showBindBltSuccess(data){
				debugger;
				this.showBindBlt = data
				this.$refs.table.refresh();
			},

    showBindBltClose(data){
				debugger;
				this.showBindBlt = data
			},
    //访客接待人
   
    //表单注入数据
    setData(data) {
      this.loading = true
      this.$API.vm.visit.read.req(data.id).then((res) => {
        this.loading = false
        this.form = res;
      }).catch(e=>{this.loading = false});

      this.$API.vm.people.list.req({ visit: data.id, page: 0 }).then((res) => {
        this.peoplelist = res;
      });
    },
    //设置过滤项
    setFilters(filters) {
      this.selectionFilters = filters;
      this.setFiltersVisible = true;
    },
  },
};
</script>

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