common-framework v0.0.0

Vue 3 + TypeScript + Vite

1. 项目结构

.
├── assets
│   ├── images // 图片资源
├── dist // 打包后的文件
├── node_modules
├── exxamples // 示例代码
├── hooks // 自定义hooks
├── router // 路由
├── packages // 组件库
├── public // 静态资源
├── utils // 工具函数

2. 项目依赖 需要宿主环境支持vue3 并且有 element-plus，axios 等依赖

3. 使用方法 main.ts

npm install git+http://192.168.181.197:9090/sdic/sdic-framework-web.git#dev --force
import sdicFramework from 'sdic-framework'
import 'sdic-framework/dist/style.css'
app.use(sdicFramework)

4. sdic-request 使用方法 utils/http/index.ts 引用 旧项目框架中的http 替换 还未对接状态码

import { sdicRequest } from 'sdic-framework'
import { useGlobSetting } from '@/hooks/setting'
import { storage } from '@/utils/Storage'
const globSetting = useGlobSetting()
const http = new sdicRequest({
  baseURL: globSetting.apiUrl,
  timeout: 10000,
})
const token = storage.get('ACCESS-TOKEN');
http.setHeader({
  'Authorization':`Bearer ${token}`,
})
console.log('token',token)
export default http

5. pro-table 使用方法 包含了分页和搜索

  <template>
    <!-- 物资申领 -->
    <div class="main-view-item">
      <ProTable
        ref="proTable"
        :tool-buttons="false"
        :columns="columns"
        :request-api="getTableList"
        :init-param="initParam"
        :data-callback="dataCallback"
        @cell-mouse-enter="cellMouseEnter"
        @clickOutside="enterQueue = []"
      >
        <!-- 表格 header 按钮 -->
        <template #tableHeader="">
          <el-button type="primary" icon="Plus" @click="goNewPage(1, null)">新增</el-button>
        </template>
        <!-- 首列自定义 -->
        <template #applyCode="scope">
          <span class="name">{{ scope.row.applyCode }}</span>
          <el-popover v-if="enterQueue.includes(scope.row.id)" trigger="hover" placement="bottom">
            <!-- 操作 ul -->
            <ul class="operation-ul">
              <!-- 编辑 -->
              <li v-if="[0, 1, 4, 5].includes(scope.row.applyStatus)" @click="goNewPage(1, scope.row)">编辑</li>
              <li @click="goDetail(3, scope.row)">详情</li>
              <!-- 提交审批 -->
              <li v-if="scope.row.applyStatus == 1" @click="approval(1, scope.row)">提交审批</li>
              <!-- 删除 -->
              <li v-if="[0, 1, 4, 5].includes(scope.row.applyStatus)" @click="deleteRow(scope.row)">删除</li>
            </ul>
            <template #reference>
              <img class="caozuo-icon" src="@/assets/images/caozuo.png" />
            </template>
          </el-popover>
        </template>
        <!-- 楼层建筑物列 -->
        <template #blName="scope">
          <span class="name">{{ scope.row.blName ? `${scope.row.flName}-${scope.row.blName}`:scope.row.blName|| '--' }}</span>
        </template>
      </ProTable>
    </div>
  </template>

  <script lang="ts" setup>
  import { ProTableInstance } from '@/components/ProTable/interface';
  import { useRouter } from 'vue-router';
  import { getApplyList, deleteApply, submitApply, revokeApply } from '@/api/materialManagement/apply';
  import { getDeptList } from '@/api/materialManagement/dict';
  import { useHandleData } from '@/hooks/useHandleData';
  import { ElMessage } from 'element-plus';
  // 表格配置项
  const columns = reactive([
    { label: '申领单号', prop: 'applyCode', width: 220 },
    {
      label: '申请日期',
      prop: 'applyTime',
    },
    {
      label: '申请日期',
      prop: 'applyTimeList',
      isShow: false,
      search: {
        el: 'date-picker',
        props: { type: 'daterange', valueFormat: 'YYYY-MM-DD' },
      },
    },
    { label: '申领人', prop: 'applyPersonName', search: { el: 'input', placeholder: '请输入申领人' } },
    {
      label: '所属部门',
      prop: 'deptName',
    },
    {
      label: '所属部门',
      prop: 'deptId',
      isShow: false, // 字典请求不带参数
      // 字典请求携带参数
      enum: () => getDeptList({}),
      search: { el: 'tree-select', props: { filterable: true, checkStrictly: true }, placeholder: '请选择部门' },
      fieldNames: { label: 'deptName', value: 'deptId' },
    },
    { label: '楼层-建筑物', prop: 'blName' },
    { label: '领用状态', prop: 'applyStatusName' },
    { label: '事由', prop: 'remark', width: 250 },
  ]);
  // ProTable 实例
  const proTable = ref<ProTableInstance>();
  // 获取表格数据
  const getTableList = async (params: any) => {
    return getApplyList(params);
  };
  // 表格初始化参数
  const initParam = reactive({});
  // 表格数据回调
  const dataCallback = (data: any) => {
    return data;
  };
  // 鼠标移入
  const enterQueue = ref<any[]>([]);
  const cellMouseEnter = (row: any) => {
    // enterQueue如果没有，就push，确保只有一个
    // 先清空
    enterQueue.value = [];
    // 再push
    enterQueue.value.push(row.id);
  };
  // 新增/编辑
  const router = useRouter();
  const goNewPage = (type: number, row: any) => {
    const id = row?.id;
    const query = { id, type };
    console.log(query);
    router.push({ path: '/ycml/addApply', query });
  };
  // 详情
  const goDetail = (type: number, row: any) => {
    const id = row.id;
    const query = { id, type };
    router.push({ path: '/ycml/apply-detail', query });
  };
  // 提交/撤销审批
  const approval = async (type: any, row: any) => {
    const api = type === 1 ? submitApply : revokeApply;
    try {
      const res = await api({
        id: row.id,
      });
      if (res.code == 200) {
        ElMessage.success('操作成功');
        proTable.value?.getTableList();
      } else {
        throw new Error(res.message);
      }
    } catch (error) {
      console.error(error);
    }
    proTable.value?.getTableList();
  };
  // 删除
  const deleteRow = async (row: any) => {
    const res = await useHandleData(
      deleteApply,
      {
        id: row.id,
      },
      '确认删除'
    );
    if (res) {
      proTable.value?.getTableList();
    }
  };
  </script>