@agile-team/wl-skills-kit 1.0.0

package/files/demo/produce/aiflow/mmwr-customer-apply-change/data.ts

@@ -0,0 +1,338 @@
+import {
+  AbstractPageQueryHook,
+  BaseQueryItemDesc,
+  ActionButtonDesc,
+  TableColumnDesc
+} from "@/types/page";
+import { postAction } from "@jhlc/common-core/src/api/action";
+import envConfig from "@jhlc/common-core/src/store/env-config";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { h, resolveComponent } from "vue";
+
+const STATUS_TAG_MAP: Record<string, Record<string, string>> = {
+  approvalStatus: {
+    开立审批中: "",
+    审批完成: "success",
+    驳回: "danger",
+    流程终止: "info"
+  },
+  verifyStatus: { 已核实: "success", 未核实: "info" }
+};
+function renderStatusTag(row: any, field: string) {
+  const val = row[field];
+  const typeMap = STATUS_TAG_MAP[field];
+  if (!typeMap) return val;
+  const type = Object.prototype.hasOwnProperty.call(typeMap, val)
+    ? typeMap[val]
+    : undefined;
+  if (type === undefined) return val;
+  return h(
+    resolveComponent("ElTag") as any,
+    { type: type || "", effect: "light", size: "small" },
+    () => val
+  );
+}
+
+export const API_CONFIG = {
+  list: "/sale/customerApply/changeList",
+  remove: "/sale/customerApply/remove",
+  getById: "/sale/customerApply/getById",
+  save: "/sale/customerApply/save",
+  update: "/sale/customerApply/update",
+  submit: "/sale/customerApply/submit",
+  withdraw: "/sale/customerApply/withdraw",
+  export: "/sale/customerApply/export"
+} as const;
+
+const OPTS = {
+  approvalProduct: [
+    { label: "热轧", value: "热轧" },
+    { label: "盘元", value: "盘元" },
+    { label: "冷精", value: "冷精" },
+    { label: "汽车", value: "汽车" }
+  ],
+  applyOrg: [
+    { label: "不锈鋼接單中心", value: "不锈鋼接單中心" },
+    {
+      label: "江阴华新特殊合金材料有限公司",
+      value: "江阴华新特殊合金材料有限公司"
+    },
+    { label: "揉瞒管理中心", value: "揉瞒管理中心" },
+    { label: "烟台华鑫再生资源有限公司", value: "烟台华鑫再生资源有限公司" }
+  ],
+  applyType: [
+    { label: "新增", value: "新增" },
+    { label: "变更", value: "变更" }
+  ],
+  applyDept: [
+    { label: "業務管理處", value: "業務管理處" },
+    { label: "線材銷售部", value: "線材銷售部" },
+    { label: "無縫管銷售處", value: "無縫管銷售處" }
+  ],
+  applicant: [
+    { label: "魏子明", value: "魏子明" },
+    { label: "龚辉鉴", value: "龚辉鉴" },
+    { label: "宋书迪", value: "宋书迪" },
+    { label: "李锋", value: "李锋" }
+  ],
+  approvalStatus: [
+    { label: "开立审批中", value: "开立审批中" },
+    { label: "审批完成", value: "审批完成" },
+    { label: "驳回", value: "驳回" },
+    { label: "流程终止", value: "流程终止" }
+  ],
+  verifyStatus: [
+    { label: "已核实", value: "已核实" },
+    { label: "未核实", value: "未核实" }
+  ]
+};
+
+const FORM_ROUTE = "/aiflow/mmwrCustomerApplyChangeForm";
+
+function navigateToForm(query?: Record<string, string>) {
+  const router = envConfig()?.router;
+  if (!router) {
+    ElMessage.error("路由未初始化，请刷新页面重试");
+    return;
+  }
+  const target: any = { path: FORM_ROUTE };
+  if (query) target.query = query;
+  location.href = router.resolve(target).href;
+}
+
+export function createPage() {
+  const Page = new (class extends AbstractPageQueryHook {
+    constructor() {
+      super({ url: { list: API_CONFIG.list, remove: API_CONFIG.remove } });
+    }
+
+    queryDef(): BaseQueryItemDesc<any>[] {
+      return [
+        { name: "customerCode", label: "客户编码", placeholder: "请输入" },
+        {
+          name: "approvalProduct",
+          label: "审批产品别",
+          component: () => ({ tag: "jh-select", items: OPTS.approvalProduct })
+        },
+        {
+          name: "applyOrg",
+          label: "申请组织",
+          component: () => ({ tag: "jh-select", items: OPTS.applyOrg })
+        },
+        { name: "customerName", label: "客户名称", placeholder: "请输入" },
+        {
+          name: "applyType",
+          label: "申请类型",
+          component: () => ({ tag: "jh-select", items: OPTS.applyType })
+        },
+        {
+          name: "applyDept",
+          label: "申请部门",
+          component: () => ({ tag: "jh-select", items: OPTS.applyDept })
+        },
+        {
+          name: "applicant",
+          label: "申请人",
+          component: () => ({ tag: "jh-select", items: OPTS.applicant })
+        },
+        {
+          name: "approvalStatus",
+          label: "审批状态",
+          component: () => ({ tag: "jh-select", items: OPTS.approvalStatus })
+        },
+        {
+          name: "applyDate",
+          startName: "applyDateStart",
+          endName: "applyDateEnd",
+          label: "申请日期",
+          component: () => ({
+            tag: "jh-date",
+            type: "daterange",
+            rangeSeparator: "至",
+            showFormat: "YYYY-MM-DD",
+            valueFormat: "YYYY-MM-DD"
+          })
+        },
+        {
+          name: "verifyStatus",
+          label: "核实状态",
+          component: () => ({ tag: "jh-select", items: OPTS.verifyStatus })
+        }
+      ];
+    }
+
+    toolbarDef(): ActionButtonDesc[] {
+      return [
+        { name: "primary", label: "新增申请", onClick: () => navigateToForm() },
+        {
+          label: "提交",
+          type: "primary",
+          plain: true,
+          onClick: () => {
+            const rows = this.tableRef.value?.getSelectionRows();
+            if (!rows?.length) {
+              ElMessage.warning("请先选择数据");
+              return;
+            }
+            const ids = rows.map((r: any) => r.id);
+            ElMessageBox.confirm("确定提交选中申请？", "提示", { type: "info" })
+              .then(() => {
+                postAction(API_CONFIG.submit, { ids }).then(() => {
+                  ElMessage.success("提交成功");
+                  this.select();
+                });
+              })
+              .catch(() => {});
+          }
+        },
+        {
+          label: "删除",
+          type: "danger",
+          plain: true,
+          onClick: () => {
+            const rows = this.tableRef.value?.getSelectionRows();
+            if (!rows?.length) {
+              ElMessage.warning("请先选择数据");
+              return;
+            }
+            this.removeBatch();
+          }
+        },
+        {
+          label: "审批驳回",
+          type: "danger",
+          plain: true,
+          onClick: () => {
+            const rows = this.tableRef.value?.getSelectionRows();
+            if (!rows?.length) {
+              ElMessage.warning("请先选择数据");
+              return;
+            }
+            const ids = rows.map((r: any) => r.id);
+            ElMessageBox.confirm("确定驳回选中申请？", "提示", {
+              type: "warning"
+            })
+              .then(() => {
+                postAction(API_CONFIG.update, {
+                  ids,
+                  approvalStatus: "驳回"
+                }).then(() => {
+                  ElMessage.success("已驳回");
+                  this.select();
+                });
+              })
+              .catch(() => {});
+          }
+        },
+        {
+          label: "审批通过",
+          type: "success",
+          plain: true,
+          onClick: () => {
+            const rows = this.tableRef.value?.getSelectionRows();
+            if (!rows?.length) {
+              ElMessage.warning("请先选择数据");
+              return;
+            }
+            const ids = rows.map((r: any) => r.id);
+            ElMessageBox.confirm("确定审批通过？", "提示", { type: "success" })
+              .then(() => {
+                postAction(API_CONFIG.update, {
+                  ids,
+                  approvalStatus: "审批完成"
+                }).then(() => {
+                  ElMessage.success("审批通过");
+                  this.select();
+                });
+              })
+              .catch(() => {});
+          }
+        },
+        {
+          label: "导出",
+          plain: true,
+          onClick: () => {
+            postAction(API_CONFIG.export, this.queryParam.value).then(() =>
+              ElMessage.success("导出成功")
+            );
+          }
+        }
+      ];
+    }
+
+    columnsDef(): TableColumnDesc<any>[] {
+      return [
+        { type: "selection" },
+        { type: "index" },
+        {
+          label: "申请编码",
+          name: "applyCode",
+          minWidth: 160,
+          defaultSlot: ({ row }: any) =>
+            h(
+              "span",
+              {
+                style:
+                  "color:#409eff;cursor:pointer;text-decoration:underline;",
+                onClick: () => navigateToForm({ id: row.id })
+              },
+              row.applyCode
+            )
+        },
+        { label: "申请类型", name: "applyType", minWidth: 100 },
+        { label: "客户编码", name: "customerCode", minWidth: 120 },
+        {
+          label: "客户名称",
+          name: "customerName",
+          minWidth: 200,
+          showOverflowTooltip: true
+        },
+        { label: "审批产品别", name: "approvalProduct", minWidth: 100 },
+        { label: "申请原因", name: "applyReason", minWidth: 120 },
+        { label: "申请人", name: "applicant", minWidth: 100 },
+        { label: "申请部门", name: "applyDept", minWidth: 130 },
+        {
+          label: "申请组织",
+          name: "applyOrg",
+          minWidth: 180,
+          showOverflowTooltip: true
+        },
+        { label: "创建人", name: "creator", minWidth: 100 },
+        { label: "创建时间", name: "createTime", minWidth: 160 },
+        {
+          label: "审批状态",
+          name: "approvalStatus",
+          minWidth: 110,
+          fixed: "right",
+          defaultSlot: ({ row }: any) => renderStatusTag(row, "approvalStatus")
+        },
+        {
+          label: "核实状态",
+          name: "verifyStatus",
+          minWidth: 100,
+          fixed: "right",
+          defaultSlot: ({ row }: any) => renderStatusTag(row, "verifyStatus")
+        },
+        {
+          label: "操作",
+          width: 140,
+          fixed: "right",
+          operations: [
+            {
+              name: "edit",
+              label: "编辑",
+              onClick: (row: any) => navigateToForm({ id: row.id })
+            },
+            {
+              name: "remove",
+              label: "删除",
+              onClick: (row: any) => this.remove(row.id)
+            }
+          ]
+        }
+      ];
+    }
+  })();
+
+  return (Page as any).create() as any;
+}

package/files/demo/produce/aiflow/mmwr-customer-apply-change/index.scss

@@ -0,0 +1 @@
+// 新增申请列表页样式

package/files/demo/produce/aiflow/mmwr-customer-apply-change/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="app-container app-page-container">
+    <BaseQuery :form="queryParam" :items="queryItems" @select="select" @reset="select" />
+    <BaseToolbar :items="toolbars" />
+    <BaseTable ref="tableRef" :data="list" :columns="columns" showToolbar />
+    <jh-pagination
+      v-show="page.total && page.total > 0"
+      :total="page.total || 0"
+      v-model:currentPage="page.current"
+      v-model:pageSize="page.size"
+      @current-change="select"
+      @size-change="select"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { createPage } from "./data";
+
+const Page = createPage();
+const { tableRef, page, queryParam, list, queryItems, columns, toolbars, select } = Page;
+
+onMounted(() => select());
+</script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+</style>

package/files/demo/produce/aiflow/mmwr-customer-apply-change-form/data.ts

@@ -0,0 +1,115 @@
+import { postAction, getAction } from "@jhlc/common-core/src/api/action";
+import { ElMessage } from "element-plus";
+import { useRouter } from "vue-router";
+import { createChangeMockData } from "@/components/local/c_customerTabs/data";
+import envConfig from "@jhlc/common-core/src/store/env-config";
+
+export const API_CONFIG = {
+  getById: "/sale/customerApply/getById",
+  save: "/sale/customerApply/save",
+  submit: "/sale/customerApply/submit",
+  changeHistory: "/sale/customerApply/changeHistory"
+} as const;
+
+export function useApplyChangeForm(tabsRef: any) {
+  const router = useRouter();
+  const loading = ref(false);
+  const isEdit = ref(false);
+  const currentId = ref<string>("");
+
+  async function loadDetail(id: string) {
+    loading.value = true;
+    isEdit.value = true;
+    currentId.value = id;
+    try {
+      const res = await getAction(API_CONFIG.getById, { id });
+      if (res?.data) tabsRef.value?.loadData(res.data);
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  function loadMockData() {
+    tabsRef.value?.loadData(createChangeMockData());
+  }
+
+  async function handleSave() {
+    const valid = await tabsRef.value?.validate();
+    if (!valid) {
+      ElMessage.warning("请完善必填项");
+      return;
+    }
+    loading.value = true;
+    try {
+      const formData = tabsRef.value?.collectFormData();
+      const payload = isEdit.value
+        ? { ...formData, id: currentId.value }
+        : formData;
+      const res = await postAction(API_CONFIG.save, payload);
+      if (res?.code === 200) {
+        ElMessage.success("保存成功");
+        if (!isEdit.value && res.data?.id) {
+          currentId.value = res.data.id;
+          isEdit.value = true;
+        }
+      }
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  async function handleSaveAndChange() {
+    const valid = await tabsRef.value?.validate();
+    if (!valid) {
+      ElMessage.warning("请完善必填项");
+      return;
+    }
+    loading.value = true;
+    try {
+      const formData = tabsRef.value?.collectFormData();
+      const payload = isEdit.value
+        ? { ...formData, id: currentId.value }
+        : formData;
+      const saveRes = await postAction(API_CONFIG.save, payload);
+      if (saveRes?.code === 200) {
+        const id = currentId.value || saveRes.data?.id;
+        const submitRes = await postAction(API_CONFIG.submit, { ids: [id] });
+        if (submitRes?.code === 200) ElMessage.success("保存并变更成功");
+      }
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  const HISTORY_ROUTE = "/aiflow/mmwrCustomerApplyChangeHistory";
+  function handleChangeHistory() {
+    if (!currentId.value) {
+      ElMessage.warning("请先保存申请后再查看变更历史");
+      return;
+    }
+    const router = envConfig()?.router;
+    if (!router) {
+      ElMessage.error("路由未初始化，请刷新页面重试");
+      return;
+    }
+    location.href = router.resolve({
+      path: HISTORY_ROUTE,
+      query: { id: currentId.value }
+    }).href;
+  }
+
+  function handleCancel() {
+    router.back();
+  }
+
+  return {
+    loading,
+    isEdit,
+    loadDetail,
+    loadMockData,
+    handleSave,
+    handleSaveAndChange,
+    handleChangeHistory,
+    handleCancel
+  };
+}

package/files/demo/produce/aiflow/mmwr-customer-apply-change-form/index.scss

@@ -0,0 +1,44 @@
+.app-page-container {
+  overflow-y: auto;
+  padding-bottom: 24px;
+}
+
+.page-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+
+  .page-title {
+    font-size: 18px;
+    font-weight: 600;
+    margin-right: 12px;
+  }
+
+  .page-tag {
+    display: inline-block;
+    padding: 2px 8px;
+    font-size: 12px;
+    border-radius: 4px;
+    margin-right: 8px;
+
+    &--add {
+      background-color: var(--el-color-primary-light-9);
+      color: var(--el-color-primary);
+      border: 1px solid var(--el-color-primary-light-7);
+    }
+
+    &--status {
+      background-color: var(--el-color-warning-light-9);
+      color: var(--el-color-warning);
+      border: 1px solid var(--el-color-warning-light-7);
+    }
+  }
+
+  .only-required-check {
+    margin-left: 8px;
+  }
+}
+
+.page-toolbar {
+  margin-bottom: 12px;
+}

package/files/demo/produce/aiflow/mmwr-customer-apply-change-form/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="app-container app-page-container" v-loading="loading">
+    <div class="page-header">
+      <span class="page-title">客户申请详情</span>
+      <span v-if="isEdit" class="page-tag page-tag--change">变更</span>
+      <span class="page-tag page-tag--status">未审核</span>
+      <el-checkbox v-model="onlyRequired" class="only-required-check">只看必填项</el-checkbox>
+    </div>
+    <div class="page-toolbar">
+      <el-button type="danger" @click="handleSaveAndChange">保存并变更</el-button>
+      <el-button type="warning" @click="handleSave">保存</el-button>
+      <el-button type="primary" @click="handleChangeHistory">变更历史查询</el-button>
+      <el-button @click="handleCancel">取消</el-button>
+    </div>
+    <c_customerTabs ref="tabsRef" mode="change" :only-required="onlyRequired" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRoute } from "vue-router";
+import { useApplyChangeForm } from "./data";
+import c_customerTabs from "@/components/local/c_customerTabs/index.vue";
+
+const tabsRef = ref();
+const route = useRoute();
+const onlyRequired = ref(false);
+
+const { loading, isEdit, loadDetail, loadMockData, handleSave, handleSaveAndChange, handleChangeHistory, handleCancel } =
+  useApplyChangeForm(tabsRef);
+
+onMounted(() => {
+  const id = route.query.id as string;
+  if (id) {
+    loadDetail(id);
+  } else {
+    loadMockData();
+  }
+});
+</script>
+
+<style scoped lang="scss">
+@import "./index.scss";
+</style>