zhangwei
8 天以前 03c275439949875a857538df89a41696642c42b3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
// import dayjs from "dayjs";
import editForm from "../form.vue";
import { handleTree } from "@/utils/tree";
import { message } from "@/utils/message";
import { pageCollection } from "@/api/item/aboutitem";
import { addDialog } from "@/components/ReDialog";
import { type Ref, reactive, ref, onMounted, h, computed } from "vue";
import type { FormItemProps } from "./types";
import { cloneDeep, deviceDetection, getKeyList } from "@pureadmin/utils";
import type { PaginationProps } from "@pureadmin/table";
 
const selectedNum = ref(0);
 
export function useDept(tableRef?: Ref) {
  const form = reactive({
    // 新增日期范围,可为 null,类型为数组
    createDateRange: null,
    // 行政区域,可为 null,类型为字符串
    xingzhengquyu: [],
    // 行业品目,可为 null,类型为字符串
    hangyepinmu: "",
    // 订单状态,可为 null,类型为 32 位整数
    orderStatus: "",
    // 质疑有无,可为 null,类型为布尔值
    zhiyi: [],
    // 投诉有无,可为 null,类型为布尔值
    tousu: [],
    // 项目名称,可为 null,类型为字符串
    projectName: null,
    // 代理机构名称,可为 null,类型为字符串
    dailijigoumingcheng: null,
    caigourenmingcheng: null,
    // 中标供应商姓名,可为 null,类型为字符串
    zhongbiaoName: null,
    // 专家姓名,可为 null,类型为字符串
    zhuanjiaName: null
  });
  const state = reactive({
    caigoufangshiList: [],
    hangyepingmuList: [],
    orderStatusList: [],
    regionList: [],
    daimaleixingList: []
  });
  const pagination = reactive<PaginationProps>({
    total: 0,
    pageSize: 10,
    currentPage: 1,
    background: true
  });
  // //获取采购方式
  // const getCaigoufangshiListFun = async () => {
  //   const res = await getCaigoufangshiList();
  //   state.caigoufangshiList = res.result;
  // };
 
  // //获取行业品目
  // const getHangyepingmuListFun = async () => {
  //   const res = await getHangyepingmuList();
  //   state.hangyepingmuList = res.result;
  // };
 
  // //获取项目进度
  // const getOrderStatusListFun = async () => {
  //   const res = await getOrderStatusList();
  //   state.orderStatusList = res.result;
  // };
 
  // // 获取区域
  // const getRegionListFun = async () => {
  //   const res = await getRegionList();
  //   state.regionList = res.result;
  // };
 
  // // 获取代码类型
  // const getDaimaleixingListFun = async () => {
  //   const res = await getDaimaleixingList();
  //   state.daimaleixingList = res.result;
  // };
  const formRef = ref();
  const dataList = ref([]);
  const loading = ref(true);
  const getOrderStatus = row => {
    const res = state.orderStatusList.find(item => {
      return row.orderStatus == item.status;
    });
    return res?.label;
  };
  const columns: TableColumnList = [
    {
      label: "勾选列", // 如果需要表格多选,此处label必须设置
      type: "selection",
      fixed: "left",
      reserveSelection: true // 数据刷新后保留选项
    },
    {
      label: "报名截止时间",
      prop: "caigourenmingcheng",
      minWidth: 70
    },
    {
      label: "区域",
      prop: "projectName",
      width: 180,
      align: "left"
    },
    {
      label: "项目名称",
      prop: "projectName",
      minWidth: 70,
      cellRenderer: ({ row, props }) => getOrderStatus(row)
    },
    {
      label: "项目编号",
      prop: "baomingfei",
      minWidth: 70
    },
    {
      label: "代理机构",
      prop: "toubiaobaozhengjin",
      minWidth: 70
    },
    {
      label: "开标时间",
      prop: "zhongbiaoName",
      minWidth: 180
    },
    {
      label: "操作",
      fixed: "right",
      width: 80,
      slot: "operation"
    }
  ];
 
  /** 当CheckBox选择项发生变化时会触发该事件 */
  function handleSelectionChange(val) {
    selectedNum.value = val.length;
    // 重置表格高度
    tableRef.value.setAdaptive();
  }
  /** 取消选择 */
  function onSelectionCancel() {
    selectedNum.value = 0;
    // 用于多选表格,清空用户的选择
    tableRef.value.getTableRef().clearSelection();
  }
  /** 批量删除 */
  async function onbatchDel() {
    // 返回当前选中的行
    const curSelected = tableRef.value.getTableRef().getSelectionRows();
    const data = [];
    curSelected.forEach(item => {
      data.push({ id: item.id });
    });
    const res = await caigourenBatchDelete(data);
    if (res.code == "200") {
      // 接下来根据实际业务,通过选中行的某项数据,比如下面的id,调用接口进行批量删除
      message(
        `已删除项目名称为 ${getKeyList(curSelected, "projectName")} 的数据`,
        {
          type: "success"
        }
      );
      onSearch();
    } else {
      message(res.message, {
        type: "error"
      });
    }
    tableRef.value.getTableRef().clearSelection();
    onSearch();
  }
  function handleSizeChange(val: number) {
    console.log(`${val} items per page`);
  }
 
  function handleCurrentChange(val: number) {
    console.log(`current page: ${val}`);
  }
 
  function resetForm(formEl) {
    if (!formEl) return;
    formEl.resetFields();
    onSearch();
  }
  const checkboxAsRadio = data => {
    if (data.length > 1) {
      data.shift();
    }
  };
  async function onSearch() {
    const obj = cloneDeep(form);
    // obj.tousu = obj.tousu.join("");
    // obj.zhiyi = obj.zhiyi.join("");
    // obj.xingzhengquyu = obj.xingzhengquyu ? obj.xingzhengquyu.join("") : "";
    loading.value = true;
    const { result } = await pageCollection(obj); // 这里是返回一维数组结构,前端自行处理成树结构,返回格式要求:唯一id加父节点parentId,parentId取父节点id
    const newData = result.items;
    loading.value = false;
    pagination.total = result.total;
    pagination.pageSize = result.pageSize;
    pagination.currentPage = result.page;
    // if (!isAllEmpty(form.name)) {
    //   // 前端搜索项目名称
    //   newData = newData.filter(item => item.name.includes(form.name));
    // }
    // if (!isAllEmpty(form.status)) {
    //   // 前端搜索状态
    //   newData = newData.filter(item => item.status === form.status);
    // }
    dataList.value = handleTree(newData); // 处理成树结构
  }
 
  function formatHigherDeptOptions(treeList) {
    // 根据返回数据的status字段值判断追加是否禁用disabled字段,返回处理后的树结构,用于上级项目级联选择器的展示(实际开发中也是如此,不可能前端需要的每个字段后端都会返回,这时需要前端自行根据后端返回的某些字段做逻辑处理)
    if (!treeList || !treeList.length) return;
    const newTreeList = [];
    for (let i = 0; i < treeList.length; i++) {
      treeList[i].disabled = treeList[i].status === 0 ? true : false;
      formatHigherDeptOptions(treeList[i].children);
      newTreeList.push(treeList[i]);
    }
    return newTreeList;
  }
 
  function openDialog(title = "新增", row?: FormItemProps) {
    console.log(row, "-");
 
    addDialog({
      title: `${title}项目`,
      props: {
        formInline: {
          higherDeptOptions: formatHigherDeptOptions(cloneDeep(dataList.value)),
          id: row?.id ?? "",
          projectCode: row?.projectCode ?? "", // 项目编号(必填)
          projectName: row?.projectName ?? "", // 项目名称(必填)
          hangyepinmu: row?.hangyepinmu ?? null, // 行业品目(可选)
          caigoufangshi: row?.caigoufangshi ?? null, // 采购方式(可选)
          caigouyusuan: row?.caigouyusuan ?? null, // 采购预算(可选)
          dingbiaoguize: row?.dingbiaoguize ?? null, // 定标规则(可选)
          baomingfei: row?.baomingfei ?? null, // 报名费(可选)
          toubiaobaozhengjin: row?.toubiaobaozhengjin ?? null, // 投标保证金(可选)
          lianhetitoubiao: row?.lianhetitoubiao ?? null, // 联合体投标(可选)
          kaibiaofangshi: row?.kaibiaofangshi ?? null, // 开标方式(可选)
          shifoufenbao: row?.shifoufenbao ?? "false", // 是否分包(可选)
          shifoutuisongxuanchuan: row?.shifoutuisongxuanchuan ?? "true", // 是否推送宣传(可选)
          caigourenmingcheng: row?.caigourenmingcheng ?? null, // 采购人名称(可选)
          xingzhengquyu: row?.xingzhengquyu.split(",") ?? [], // 行政区域(可选)
          xingzhengquyuName: row?.xingzhengquyuName ?? null, // 行政区域名称(可选)
          jigoudaima: row?.jigoudaima ?? null, // 机构代码(可选)
          daimaleixing: row?.daimaleixing ?? null, // 代码类型(可选)
          lianxiren: row?.lianxiren ?? null, // 联系人(可选)
          lianxidianhua: row?.lianxidianhua ?? null, // 联系电话(可选)
          tongxindizhi: row?.tongxindizhi ?? null, // 通信地址(可选)
          dianziyoujian: row?.dianziyoujian ?? null, // 电子邮件(可选)
          xiangmujingbanren: row?.xiangmujingbanren ?? null, // 项目经办人(可选)
          zhiwu: row?.zhiwu ?? null, // 职务(可选)
          jingbanrendianhua: row?.jingbanrendianhua ?? null, // 经办人电话(可选)
          dailijigoumingcheng: row?.dailijigoumingcheng ?? null, // 代理机构名称(可选)
          dailiLianxiren: row?.dailiLianxiren ?? null, // 代理机构联系人(可选)
          dailiLianxidianhua: row?.dailiLianxidianhua ?? null, // 代理机构联系电话(可选)
          dailiDianziyoujian: row?.dailiDianziyoujian ?? null, // 代理机构电子邮件(可选)
          dailiTongxindizhi: row?.dailiTongxindizhi ?? null, // 代理机构通信地址(可选)
          dailiXiangmujingli: row?.dailiXiangmujingli ?? null, // 代理机构项目经理(可选
          dailijingliLianxidianhua: row?.dailijingliLianxidianhua ?? null // 代理机构项目经理联系电话(可选)
        }
      },
      width: "80%",
      draggable: true,
      fullscreen: deviceDetection(),
      fullscreenIcon: true,
      sureBtnLoading: true,
      closeOnClickModal: false,
      contentRenderer: () => h(editForm, { ref: formRef, formInline: null }),
      beforeSure: (done, { options, closeLoading }) => {
        const FormRef = formRef.value.getRef();
        const curData = cloneDeep(options.props.formInline as FormItemProps);
        async function chores() {
          message(`您${title}了项目名称为${curData.projectName}的这条数据`, {
            type: "success"
          });
          // curData.dingbiaoguize = curData.dingbiaoguize.join("");
          curData.xingzhengquyu = curData.xingzhengquyu.join(",");
          let res;
          if (title == "新增") {
            res = await caigourenAdd(curData);
          } else {
            res = await caigourenUpdate(curData);
          }
          if (res.code == "200") {
            done(); // 关闭弹框
            onSearch(); // 刷新表格数据
          } else {
            closeLoading();
            message(res.message, {
              type: "error"
            });
          }
        }
        FormRef.validate((valid, obj) => {
          if (valid) {
            // 表单规则校验通过
            if (title === "新增") {
              // 实际开发先调用新增接口,再进行下面操作
              chores();
            } else {
              // 实际开发先调用修改接口,再进行下面操作
              chores();
            }
          } else {
            closeLoading();
            const fail = [];
            for (const key in obj) {
              fail.push(obj[key][0].message);
            }
            message(fail[0], {
              type: "warning"
            });
            return false;
          }
        });
      }
    });
  }
 
  async function handleDelete(row) {
    const res = await caigourenDelete({ id: row.id });
    if (res.code == "200") {
      message(`您删除了项目名称为${row.projectName}的这条数据`, {
        type: "success"
      });
      onSearch();
    } else {
      message(res.message, {
        type: "error"
      });
    }
  }
 
  onMounted(() => {
    onSearch();
    getCaigoufangshiListFun();
    getHangyepingmuListFun();
    getOrderStatusListFun();
    getRegionListFun();
    getDaimaleixingListFun();
  });
 
  return {
    form,
    state,
    loading,
    columns,
    dataList,
    selectedNum,
    /** 搜索 */
    onSearch,
    /** 重置 */
    resetForm,
    /** 新增、修改项目 */
    openDialog,
    /** 删除项目 */
    handleDelete,
    handleSelectionChange,
    handleSizeChange,
    handleCurrentChange,
    pagination,
    checkboxAsRadio,
    onSelectionCancel,
    onbatchDel
  };
}