ShutongInterconnectedChemicalCloudPlatform/src/views/hr/teams/index.vue

<!--
@ 作者: 秦东
@ 时间: 2025-01-13 11:44:11
@ 备注: 班组列表
-->
<script lang="ts" setup>
import {
  teamcontlist,
  eidtdelteamcont,
  addteamcont,
  eiteteamcont,
} from "@/api/hr/org/index";
import { govthree } from "@/api/opk/opk/api";

import BatchImportTimePeople from "@/views/hr/teams/batchImportTimePeople.vue";
const downloadUrlStis =
  import.meta.env.VITE_APP_BASE_API + "/systemapi/rongxin/downLoadTearms";

const searchFormRef = ref(ElForm);
const addFormRef = ref(ElForm);
const searchMap = reactive({
  page: 1,
  pagesize: 20,
  name: "",
});
const loadLing = ref(false);
const totalCount = ref(0);
const tiemList = ref([]);
const selectTableLength = ref(0);
const tableIds = ref<string[]>([]); //已选择的行政组织ID数组

const daochuOpen = ref(false);

/**
@ 作者: 秦东
@ 时间: 2025-01-13 13:48:00
@ 功能: 获取班组列表
*/
const gainTimeList = () => {
  loadLing.value = true;
  teamcontlist(searchMap)
    .then((data) => {
      totalCount.value = data.data.total;
      tiemList.value = data.data.list;
    })
    .finally(() => {
      loadLing.value = false;
    });
};
/**
@ 作者: 秦东
@ 时间: 2025-02-27 10:47:14
@ 功能: 获取公司信息
*/
const orgList = ref<any>([]);
const govthrees = () => {
  govthree({ id: 309, all: 1 }).then((data) => {
    orgList.value = data.data;
  });
};
/**
@ 作者: 秦东
@ 时间: 2025-01-13 13:54:15
@ 功能: 加载完毕页面
*/
onMounted(() => {
  gainTimeList();
  govthrees();
});
/**
@ 作者: 秦东
@ 时间: 2025-01-13 15:00:20
@ 功能: 搜索班组
*/
const getOrgteimList = () => {
  searchMap.page = 1;
  gainTimeList();
};
/**
 * 重置搜索表单
 */
function resetSearchQuery() {
  searchFormRef.value.resetFields();
  gainTimeList();
}
/**
@ 作者: 秦东
@ 时间: 2025-01-13 15:33:49
@ 功能: 改变状态
*/
const editOrgClassState = (id: number, state: any) => {
  console.log("改变状态---", id, state);
  if (state == 1) {
    state = 2;
  } else {
    state = 1;
  }
  let send = {
    id: id,
    idstr: id.toString(),
    state: state,
    istrue: 2,
  };
  eidtdelteamcont(send).then((data) => {
    console.log("改变状态结果--》,", data);
    gainTimeList();
  });
};
/**
@ 作者: 秦东
@ 时间: 2025-01-13 15:37:00
@ 功能: 批量选择
*/
const handleClassIdChange = (selection: any) => {
  selectTableLength.value = selection.length;
  tableIds.value = selection.map((item: any) => item.id);
};

/**
@ 作者: 秦东
@ 时间: 2025-01-13 16:04:47
@ 功能: 添加班组相关数据
*/
const addDiaShow = ref(false);

const addTiemInfo = reactive({
  name: "",
});

/**
@ 作者: 秦东
@ 时间: 2025-01-13 16:09:06
@ 功能: 新增数据
*/
const addOrgClassDialog = () => {
  addDiaShow.value = true;
};
/**
@ 作者: 秦东
@ 时间: 2025-01-13 16:10:57
@ 功能: 关闭添加班组
*/
const closeAddDiaShow = () => {
  addDiaShow.value = false;
  addFormRef.value.resetFields();
  gainTimeList();
};
/**
@ 作者: 秦东
@ 时间: 2025-01-13 16:13:11
@ 功能: 重置添加表单
*/
const resetAddTime = () => {
  addTiemInfo.name = "";
  addFormRef.value.resetFields();
};
/**
@ 作者: 秦东
@ 时间: 2025-01-13 16:15:34
@ 功能: 提交新增班组
*/
const sendAddTime = () => {
  addteamcont(addTiemInfo).then((data) => {
    closeAddDiaShow();
  });
};
/**
@ 作者: 秦东
@ 时间: 2025-01-13 16:19:26
@ 功能: 删除
*/
const handleDeleteOrgClass = (classId?: string) => {
  const delOrgTypeIds = [classId || tableIds.value].join(",");
  if (!delOrgTypeIds) {
    ElMessage.warning("请勾选删除项");
    return;
  }
  ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      let send = {
        id: classId,
        idstr: classId.toString(),
        state: 3,
        istrue: 2,
      };
      eidtdelteamcont(send).then((data) => {
        gainTimeList();
      });
    })
    .catch(() => ElMessage.info("已取消删除"));
};
/////////////////////////////////////
/**
@ 作者: 秦东
@ 时间: 2025-01-13 16:27:00
@ 功能: 修改
*/
const editDiaShow = ref(false);
const editTiemInfo = reactive({
  id: "",
  name: "",
});
/**
@ 作者: 秦东
@ 时间: 2025-01-13 16:46:54
@ 功能: 编辑班组
*/
const editOrgTypeDialog = (val: any) => {
  editTiemInfo.id = val.id.toString();
  editTiemInfo.name = val.name;
  editDiaShow.value = true;
};
const editFormRef = ref(null);
/**
@ 作者: 秦东
@ 时间: 2025-01-13 16:51:07
@ 功能: 关闭编辑班组弹窗
*/
const closeEditDiaShow = () => {
  editDiaShow.value = false;
  editFormRef.value.resetFields();
  gainTimeList();
};
/**
@ 作者: 秦东
@ 时间: 2025-01-13 16:53:25
@ 功能: 重置编辑按钮
*/
const resetEditTime = () => {
  editTiemInfo.id = "";
  editTiemInfo.name = "";
  editFormRef.value.resetFields();
};
/**
@ 作者: 秦东
@ 时间: 2025-01-13 16:55:06
@ 功能: 发送修改数组数据
*/
const sendEditTime = () => {
  eiteteamcont(editTiemInfo).then((data) => {
    closeEditDiaShow();
  });
};

const setupOpen = ref(false);
const setupTeimId = ref("");
const setupTeimTitle = ref("");
/**
@ 作者: 秦东
@ 时间: 2025-01-14 07:56:27
@ 功能: 设置班组人员
*/
const setupTimePeople = (val: any) => {
  setupTeimId.value = val.id.toString();
  setupTeimTitle.value = val.name;
  setupOpen.value = true;
};
/**
@ 作者: 秦东
@ 时间: 2025-01-14 08:02:29
@ 功能: 关闭批量导入
*/
const closeBatchImport = () => {
  setupTeimId.value = "";
  setupTeimTitle.value = "";
  setupOpen.value = false;
};
/**
@ 作者: 秦东
@ 时间: 2025-02-27 10:34:02
@ 功能: 打开导出页面
*/
const upLoadOrg = reactive({
  orgId: "",
});
const openUploadPage = () => {
  daochuOpen.value = true;
};
const closeUploadPeople = () => {
  daochuOpen.value = false;
};
const orgTreeProps = {
  label: "name",
  children: "child",
};
//执行下载
const downloadPage = () => {};
</script>
<template>
  <div class="app-container">
    <el-card shadow="never">
      <template #header>
        <el-form ref="searchFormRef" :model="searchMap" :inline="true">
          <el-form-item label="班组名称" prop="keywords">
            <el-input
              v-model="searchMap.name"
              placeholder="请输入关键字"
              clearable
              @keyup.enter="getOrgteimList"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getOrgteimList">
              <template #icon><i-ep-search /></template>
              搜索
            </el-button>
            <el-button @click="resetSearchQuery">
              <template #icon><i-ep-refresh /></template>
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </template>

      <div style="margin-bottom: 15px; height: 32px; display: flex">
        <el-button
          v-hasPerm="['339372544081539072']"
          type="primary"
          @click="addOrgClassDialog()"
        >
          <i-ep-plus />
          新增
        </el-button>
        <el-button
          v-hasPerm="['339372760021086208']"
          plain
          type="primary"
          :disabled="tiemList.length === 0"
          @click="openUploadPage()"
        >
          <i class="fa fa-upload" />导出人员
        </el-button>
        <!--<span class="select-text">已选 {{ selectTableLength }} 条</span> -->
      </div>

      <el-table
        v-loading="loadLing"
        highlight-current-row
        :data="tiemList"
        stripe
        :header-cell-style="{ background: '#F4F5F9' }"
        @selection-change="handleClassIdChange"
      >
        <!-- <el-table-column type="selection" width="55" align="center" /> -->
        <el-table-column label="班组名称" prop="name" />
        <el-table-column
          v-hasPerm="['339372659932409856']"
          label="状态"
          prop="state"
          width="100"
          align="center"
        >
          <template #default="scope">
            <el-switch
              v-model="scope.row.status"
              class="ml-2"
              inline-prompt
              style="--el-switch-on-color: #1e5eff"
              @change="editOrgClassState(scope.row.id, scope.row.state)"
            />
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="250">
          <template #default="scope">
            <el-button
              v-hasPerm="['339372597063987200']"
              type="primary"
              link
              size="small"
              @click.stop="setupTimePeople(scope.row)"
              >设置班组人员</el-button
            >
            <el-button
              v-hasPerm="['339372597063987200']"
              type="primary"
              link
              size="small"
              @click.stop="editOrgTypeDialog(scope.row)"
              >编辑</el-button
            >
            <el-button
              v-hasPerm="['339372708624084992']"
              type="primary"
              link
              size="small"
              @click.stop="handleDeleteOrgClass(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-if="total > 0"
        v-model:total="totalCount"
        v-model:page="searchMap.page"
        v-model:limit="searchMap.pagesize"
        @pagination="searchMap"
      />
    </el-card>

    <el-dialog
      v-model="editDiaShow"
      title="编辑班组"
      width="300"
      :before-close="closeEditDiaShow"
    >
      <el-form ref="editFormRef" :model="editTiemInfo">
        <el-form-item label="班组名称" prop="keywords">
          <el-input v-model="editTiemInfo.name" placeholder="请输入班组名称" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="sendEditTime">
            <template #icon><i-ep-search /></template>
            确定
          </el-button>
          <el-button @click="resetEditTime">
            <template #icon><i-ep-refresh /></template>
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog
      v-model="addDiaShow"
      title="添加班组"
      width="300"
      :before-close="closeAddDiaShow"
    >
      <el-form ref="addFormRef" :model="addTiemInfo">
        <el-form-item label="班组名称" prop="keywords">
          <el-input v-model="addTiemInfo.name" placeholder="请输入班组名称" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="sendAddTime">
            <template #icon><i-ep-search /></template>
            确定
          </el-button>
          <el-button @click="resetAddTime">
            <template #icon><i-ep-refresh /></template>
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog
      v-model="setupOpen"
      :title="'批量导入《' + setupTeimTitle + '》人员'"
      width="500"
      :before-close="closeBatchImport"
    >
      <BatchImportTimePeople
        :id="setupTeimId"
        v-model:is-show="setupOpen"
        @close-open="closeBatchImport"
      />
    </el-dialog>

    <el-dialog
      v-model="daochuOpen"
      title="导出班组人员"
      width="250"
      :before-close="closeUploadPeople"
    >
      <el-form ref="addFormRef" :model="upLoadOrg">
        <el-form-item label="行政组织" prop="orgId">
          <el-tree-select
            v-model="upLoadOrg.orgId"
            :data="orgList"
            filterable
            check-strictly
            style="width: 240px"
            :props="orgTreeProps"
            node-key="id"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-link
            type="primary"
            :underline="false"
            :href="downloadUrlStis + '?org=' + upLoadOrg.orgId"
            target="_blank"
          >
            <el-button type="primary"> 确定下载 </el-button>
          </el-link>
          <el-button @click="closeUploadPeople"> 取消 </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
.select-text {
  display: inline-block;
  color: #999;
  font-size: 16px;
  padding-left: 15px;
  line-height: 40px;
  height: 32px;
}
</style>