4pc/src/view/organization.vue

<template>
  <div class="relics-layout">
    <div class="relics-header">
      <div class="search">
        <el-form label-width="100px" inline>
          <el-form-item label="单位名称">
            <el-input v-model="pageProps.orgName" clearable style="width: 250px" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="类型">
            <el-select style="width: 250px" v-model="pageProps.type" clearable>
              <el-option :value="Number(key)" :label="type" v-for="(type, key) in OrganizationTypeDesc" />
            </el-select>

          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="refresh">查询</el-button>
            <el-button type="primary" plain @click="pageProps = { ...initProps }">
              重置
            </el-button>
            <el-button type="primary" @click="addHandler"> 新增单位 </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="relics-content">
      <el-table default-expand-all row-key="orgId" :data="relicsArray" border>
        <el-table-column label="单位名称" prop="orgName"></el-table-column>
        <el-table-column label="类型" prop="type" v-slot:default="{ row }: { row: OrganizationType }">
          {{ row.type ? OrganizationTypeDesc[row.type] : '' }}
        </el-table-column>
        <el-table-column label="单位账号" prop="userName"></el-table-column>
        <el-table-column label="单位联系人" prop="contact"></el-table-column>

        <el-table-column label="创建时间" prop="updateTime" v-slot:default="{ row }">
          {{ row.updateTime && row.updateTime.substr(0, 16) }}
        </el-table-column>
        <el-table-column label="创建人" prop="createByName"></el-table-column>
        <el-table-column label="操作" width="100px" fixed="right">
          <template #default="{ row }: { row: OrganizationType }">
            <el-button link type="primary" @click="editHandler(row)" size="small">
              编辑
            </el-button>
            <el-button link type="danger" @click="delOrganization(row)" size="small">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pag-layout">
      <el-pagination background layout="total, prev, pager, next, sizes, jumper" v-model:page-size="pageProps.pageSize"
        :page-sizes="[10, 20, 50, 100]" :total="total" @current-change="(data: number) => pageProps.pageNum = data"
        :current-page="pageProps.pageNum" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onActivated, ref, watch } from "vue";
import {
  getOrgListFetch,
  addOrgFetch,
  delOrgFetch,
  alterOrgFetch,
  PageProps,
} from "@/request";
import type { OrganizationType } from "@/request/organization";
import { OrganizationTypeDesc } from '@/store/organization'
import { organizationAdd, organizationEdit } from "./quisk";
import { debounce, parseTree } from "@/util";
import { ElMessageBox } from "element-plus";

const initProps: PageProps<Partial<OrganizationType>> = {
  pageNum: 1,
  pageSize: 10,
  orgName: '',
  orgId: undefined,
  type: undefined,
};
const pageProps = ref({ ...initProps });
const total = ref<number>(0);
const relicsArray = ref<any[]>([]);

// 1省级 2市级 3县级 4服务商

const refresh = debounce(async () => {
  const data = await getOrgListFetch(pageProps.value);
  total.value = data.total;
  // console.log('parseTree', parseTree(data.records, 'orgId'))
  relicsArray.value = parseTree(data.records, 'orgId');
});

watch(pageProps, refresh, { deep: true, immediate: true });
onActivated(refresh);


const addHandler = async () => {
  await organizationAdd({ submit: addOrgFetch });
  await refresh();
};

const editHandler = async (org: OrganizationType) => {
  await organizationEdit({ org: org, submit: alterOrgFetch });
  await refresh();
};
const delOrganization = async (org: OrganizationType) => {
  console.log('org', org)
  const ok = await ElMessageBox.confirm("确定要删除吗", {
    type: "warning",
  });
  if (ok) {
    await delOrgFetch({
      orgId: org.orgId,
      orgName: org.orgName,
      type: org.type,
    });
    await refresh();
  }
};
</script>

<style scoped lang="scss">
.relics-layout {
  height: 100%;
  overflow-y: auto;
  padding: 30px;
}

.pag-layout {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.relics-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  .search {
    flex: 1;
  }

  .relics-oper {
    flex: 0 0 100px;
    text-align: right;
  }
}
</style>