pinganxiaoyuan/SafeCampus.WEB/src/views/userManage/clothing/index.vue

<!-- 
 * @Description: 服装库管理
 * @Author: syy 
 * @Date: 2024-7-18
-->
<template>
  <div class="main-box">
    <TreeFilter
      ref="treeFilter"
      label="clothSetName"
      id="clothSetId"
      width="300px"
      :show-all="true"
      :request-api="userManageClothApi.getList"
      @change="changeTreeFilter"
    >
      <template v-slot:header>
        <s-button suffix="服装库" @click="addClass(FormOptEnum.ADD)" style="margin-bottom: 15px" />
      </template>
      <template v-slot:label="{ row }">
        <span class="custom-tree-node">
          <span>{{ row.node.label }}</span>
          <span v-if="row.node.label != '全部'">
            <a @click.stop="addClass(FormOptEnum.EDIT, row.node.data)">
              <el-icon><Edit /></el-icon>
            </a>
            <a style="margin-left: 8px" @click.stop="addDelete(row.node.data.clothSetId, '删除服装库')">
              <el-icon><Delete /></el-icon>
            </a>
          </span>
        </span>
      </template>
    </TreeFilter>
    <div class="table-box">
      <ProTable ref="proTable" title="服装库管理" :columns="columns" rowKey="clothId" :data="tableData.clothes">
        <!-- 表格 header 按钮 -->
        <template #tableHeader="scope">
          <s-button suffix="服装" @click="onOpen(FormOptEnum.ADD, { clothSetId: clothSetId }, treeFilter.treeAllData)" />
          <s-button
            type="danger"
            :opt="FormOptEnum.DELETE"
            plain
            suffix="服装"
            :disabled="!scope.isSelected"
            @click="onDelete(scope.selectedListIds, '删除所选服装')"
          />
        </template>
        <!-- 表格操作栏 -->
        <template #operation="scope">
          <el-space>
            <s-button link :opt="FormOptEnum.DELETE" @click="onDelete([scope.row.clothId], `删除服装`)" />
          </el-space>
        </template>
      </ProTable>
    </div>
    <!-- 人员新增/编辑表单 -->
    <Form ref="formRef"></Form>
    <!-- 班级新增/编辑表单 -->
    <Form1 ref="formRefC" />
    <!-- 预览头像 -->
    <el-dialog v-model="visible" title="查看头像" width="830px" :before-close="handleClose">
      <div style="display: flex; align-items: center; justify-content: center">
        <img style="max-width: 100%; max-height: 600px" class="detailpic" :src="faceUrl" alt="" />
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="visible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="tsx" name="SysUserClothing">
import { userManageClothApi,userClothButtonCode,SysUserCloth } from "@/api";
import { useHandleData } from "@/hooks/useHandleData";
import { FormOptEnum } from "@/enums";
import Form from "./components/form/index.vue";
import Form1 from "./components/form1/index.vue";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import TreeFilter from "@/components/TreeFilter/index.vue";
import { useUserStore } from "@/stores/modules";
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const faceUrl = ref('');
const visible = ref(false); //是否显示人员表单
const proTable = ref<ProTableInstance>();
const treeFilter = ref<any>({});
const userStore = useUserStore();
const { accessToken } = userStore;
const tableData = ref<any>([])
// 表格配置项
const columns: ColumnProps<SysUserCloth.list>[] = [
  { type: "selection", fixed: "left", width: 50 },
  {
    prop: "clothUrl",
    label: "服装图",
    render: scope => {
      return (
        <img src={scope.row.clothUrl} onClick={() => viewHeadImage(scope)} style='width:50px;height:50px' alt=''/>
      );
    }
  },
  { prop: "operation", label: "操作", width: 250, fixed: "right" }
];
const viewHeadImage = (scope: any) => {
  faceUrl.value = scope.row.clothUrl;
  visible.value = true
};
const handleClose = () => {
  visible.value = false;
};
// 人员表单引用
const formRef = ref<InstanceType<typeof Form> | null>(null);
  // 班级表单引用
const formRefC = ref<InstanceType<typeof Form1> | null>(null);
/**
 * 打开服装表单
 * @param opt  操作类型
 * @param record  记录
 */
function onOpen(opt: FormOptEnum, record: {},treeAllData:any) {
  formRef.value?.onOpen({ opt: opt, record: record,treeAllData:treeAllData, successful: RefreshTable });
}

/**
 * 打开服装库表单
 * @param opt  操作类型
 * @param record  记录
 */

 function addClass(opt: FormOptEnum, record: {} | SysUserCloth.list = {}) {
  formRefC.value?.onOpen({ opt: opt, record: JSON.parse(JSON.stringify(record)), successful: RefreshTree });
}
/**
 * 服装库删除
 * @param ids  id数组
 */
 async function addDelete(clothSetId: string[],msg: string) {
  // 二次确认 => 请求api => 刷新表格
  await useHandleData(userManageClothApi.deleteClothDataBaseD, { clothSetId }, msg);
  RefreshTree(); //刷新表格
}

/**
 * 服装删除
 * @param ids  id数组
 */
 async function onDelete(ids: string[], msg: string) {
  // 二次确认 => 请求api => 刷新表格
  await useHandleData(userManageClothApi.delete, {clothId: ids.join(","), clothSetId:tableData.value.clothSetId}, msg);
  RefreshTable(); //刷新表格
}

// 刷新表格
const RefreshTable = () => {
  getList(clothSetId.value)
}
// 刷新表格+树
const RefreshTree = () => {
  getList(clothSetId.value)
  treeFilter.value?.refresh(); //刷新树形筛选器
}



/** 服装库切换切换 */
const clothSetId = ref<number | string>()
function changeTreeFilter(val: number | string) {
  clothSetId.value = val
  proTable.value!.pageable.pageNum = 1;
  getList(val)
}
// 获取列表
const getList = (clothSetId:any)=>{
  if(!clothSetId) return false
  userManageClothApi.page({clothSetId:clothSetId}).then((resp:any)=>{
    if(resp.code == 200){
      tableData.value = resp.data
    }
  })
}
</script>
<style scoped lang="scss">
.table-box {
  width: 100%;
  height: 100%;
}
.custom-tree-node {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  padding-right: 8px;
  font-size: 14px;
}
</style>