factory_web/src/views/hrm/employee_photon.vue

<template>
  <el-container>
    <el-header>
      <div class="left-panel">
      </div>
      <div class="right-panel">
        <div class="right-panel-search">
          <el-select 
              v-model="query.belong_dept" 
              clearable>
              <el-option v-for="item in deptData" 
              :key="item.id" 
              :label="item.name" 
              :value="item.id">
              </el-option>
          </el-select>
          <el-input
            v-model="query.search"
            placeholder="姓名/手机号"
            clearable
            style="margin-left: 4px; width: 200px"
            @keyup.enter="handleQuery"
          ></el-input>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="handleQuery"
          ></el-button>
        </div>
      </div>
    </el-header>
    <el-main class="nopadding">
      <scTable
        ref="table"
        :apiObj="apiObj"
        row-key="id"
        @selection-change="selectionChange"
        stripe
        @resetQuery="resetQuery"
      >
        <el-table-column label="#" type="index" width="50"></el-table-column>
        <el-table-column label="姓名" prop="name" width="120">
        </el-table-column>
        <el-table-column label="性别" prop="gender" width="60">
        </el-table-column>
        <el-table-column label="证件照" prop="photo" width="120">
          <template #default="scope">
            <el-avatar :size="50" :src="scope.row.photo" shape="square" />
          </template>
        </el-table-column>
        <el-table-column
          label="手机号"
          prop="phone"
          width="120"
        ></el-table-column>
        <el-table-column
          label="部门/单位"
          prop="belong_dept"
          width="180"
          :show-overflow-tooltip="true"
        >
          <template #default="scope">
            <span v-if="scope.row.belong_dept_">{{
              scope.row.belong_dept_.name
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="身份证号"
          prop="id_number"
          width="180"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column label="系统账号" prop="user" width="180"
          ><template #default="scope">
            <span v-if="scope.row.user">{{ scope.row.user_.username }}</span>
          </template></el-table-column
        >
       
        <el-table-column
          label="创建时间"
          prop="create_time"
          width="180"
        ></el-table-column>
        <el-table-column label="操作" fixed="right" align="left" width="170">
          <template #default="scope">
            <el-button
              link
              type="success"
              size="small"
              @click="table_show(scope.row)"
              >查看
            </el-button>
            <el-button
              link
              type="warning"
              size="small"
              v-auth="'employee.update'"
              @click="table_edit(scope.row)"
              >编辑
            </el-button>
          </template>
        </el-table-column>
      </scTable>
    </el-main>
  </el-container>
  <save-dialog
    v-if="dialog.save"
    ref="saveDialog"
    @success="handleSaveSuccess"
    @closed="dialog.save = false"
  >
  </save-dialog>
</template>
<script>
import saveDialog from "./ep_form.vue";
import config from "@/config";
export default {
  name: "employee",
  components: {
    saveDialog
  },
  data() {
    return {
      dialog: {
        save: false,
      },
      deptData: [],
      apiObj: this.$API.hrm.employee.list,
      query: {},
      tdevice: [],
      selection: [],
      search: {
        keyword: null,
      },
      dis: false,
      bltList: [],
      form: {
        blt: "",
        employee: "",
      },
      jobOptions: {
        10: "在职",
        20: "离职",
        30: "退休",
      },
      jobOptions2: [
        { label: "在职", value: 10 },
        { label: "离职", value: 20 },
        { label: "退休", value: 30 },
      ],
    };
  },
  mounted() {
    this.getDept();
  },
  methods: {
    getDept() {
      this.$API.system.dept.list.req({ page: 0,type:'dept'}).then(res=>{
        this.deptData = res;
				});
    },
    //添加
    add(){
        this.dialog.save = true
        this.$nextTick(() => {
            this.$refs.saveDialog.open('add')
        })
    },
    //编辑
    table_edit(row){
        this.dialog.save = true
        this.$nextTick(() => {
            this.$refs.saveDialog.open('edit').setData(row)
        })
    },
    //查看
    table_show(row){
        this.dialog.save = true
        this.$nextTick(() => {
            this.$refs.saveDialog.open('show').setData(row)
        })
    },
    
    //删除
    async table_del(row) {
      await this.$API.hrm.employee.create.req(row.id).then((res) => {
        if (res.err_msg) {
          this.$message.error(res.err_msg);
        } else {
          this.$refs.table.refresh();
          this.$message.success("删除成功");
        }
      });
    },
    //批量删除
    async batch_del() {
      this.$confirm(
        `确定删除选中的 ${this.selection.length} 项吗？如果删除项中含有子集将会被一并删除`,
        "提示",
        {
          type: "warning",
        }
      )
        .then(() => {
          const loading = this.$loading();
          this.$refs.table.refresh();
          loading.close();
          this.$message.success("操作成功");
        })
        .catch(() => {});
    },
    //表格选择后回调事件
    selectionChange(selection) {
      this.selection = selection;
    },
    //表格内开关
    changeSwitch(val, row) {
      row.status = row.status == "1" ? "0" : "1";
      row.$switch_status = true;
      setTimeout(() => {
        delete row.$switch_status;
        row.status = val;
        this.$message.success("操作成功");
      }, 500);
    },
    //搜索
    handleQuery() {
      this.$refs.table.queryData(this.query);
    },
    //根据ID获取树结构
    filterTree(id) {
      var target = null;
      function filter(tree) {
        tree.forEach((item) => {
          if (item.id == id) {
            target = item;
          }
          if (item.children) {
            filter(item.children);
          }
        });
      }
      filter(this.$refs.table.tableData);
      return target;
    },
    //本地更新数据
    handleSaveSuccess(data, mode) {
      this.$refs.table.refresh();
    },
    resetQuery() {
      this.query = {};
    },
  },
};
</script>