修改crud代码，增加textarea类型支持。修改版本管理展示

2025-02-14 13:56:17 +08:00
parent 12c5677a84
commit 3cd59b4cd7
11 changed files with 257 additions and 336 deletions
--- a/src/api/system/version.ts
+++ b/src/api/system/version.ts
@@ -4,14 +4,28 @@ const baseURL = System_BaseUrl + "/admin/version";

 const VersionApi = {
  getList() {
-    return request<any, getListResponse>({
+    return request<any>({
      url: `${baseURL}/list`,
      method: "get",
    });
  },
+  add(data: addRequest) {
+    return request<any>({
+      url: `${baseURL}`,
+      method: "post",
+      data,
+    });
+  },
+  edit(data: editRequest) {
+    return request<any>({
+      url: `${baseURL}`,
+      method: "put",
+      data,
+    });
+  },
  delete(id: string) {
    return request<any>({
-      url: `${baseURL}/id`,
+      url: `${baseURL}/` + id,
      method: "delete",
    });
  },
@@ -19,7 +33,7 @@ const VersionApi = {

 export default VersionApi;

-export interface getListResponse {
+export interface versionForm {
  /**
   * 版本 id
   */
@@ -50,3 +64,62 @@ export interface getListResponse {
  version?: string;
  [property: string]: any;
 }
+
+export interface addRequest {
+  /**
+   * 是否强制更新，0：不强制更新；1：强制更新
+   */
+  isForce: number;
+  /**
+   * 更新内容
+   */
+  message: string;
+  /**
+   * 渠道，pc 桌面端， manager_app 管理端， phone_book 电话机点餐
+   */
+  source: string;
+  /**
+   * 类型，0 windows，1 安卓，2 iOS
+   */
+  type: string;
+  /**
+   * 下载地址
+   */
+  url: string;
+  /**
+   * 版本号
+   */
+  version: string;
+  [property: string]: any;
+}
+export interface editRequest {
+  /**
+   * 版本id，ID 编号
+   */
+  id: number;
+  /**
+   * 是否强制升级，0：不强制更新；1：强制更新
+   */
+  isForce: number;
+  /**
+   * 更新内容
+   */
+  message: string;
+  /**
+   * 渠道，pc 桌面端， manager_app 管理端， phone_book 电话机点餐
+   */
+  source: string;
+  /**
+   * 类型，0 windows，1 安卓，2 iOS
+   */
+  type: string;
+  /**
+   * 下载地址
+   */
+  url: string;
+  /**
+   * 版本号
+   */
+  version: string;
+  [property: string]: any;
+}
--- a/src/components/CURD/PageForm.vue
+++ b/src/components/CURD/PageForm.vue
@@ -28,7 +28,7 @@
            </template>
            <!-- textarea 输入框 -->

-            <template v-else-if="item.type === 'textarea' || item.type === undefined">
+            <template v-else-if="item.type === 'textarea'">
              <el-input v-model="formData[item.prop]" type="textarea" v-bind="item.attrs" />
            </template>
            <!-- Select 选择器 -->
--- a/src/components/CURD/PageModal.vue
+++ b/src/components/CURD/PageModal.vue
@@ -40,8 +40,8 @@
                  <el-input v-model="formData[item.prop]" v-bind="item.attrs" />
                </template>
                <!-- textarea 输入框 -->
-                <template v-if="item.type === 'textarea' || item.type === undefined">
-                  <el-input v-model="formData[item.prop]" v-bind="item.attrs" />
+                <template v-if="item.type === 'textarea'">
+                  <el-input v-model="formData[item.prop]" v-bind="item.attrs" type="textarea" />
                </template>
                <!-- Select 选择器 -->
                <template v-else-if="item.type === 'select'">
@@ -161,6 +161,10 @@
                  <template v-if="item.type === 'input' || item.type === undefined">
                    <el-input v-model="formData[item.prop]" v-bind="item.attrs" />
                  </template>
+                  <!-- textarea 输入框 -->
+                  <template v-if="item.type === 'textarea'">
+                    <el-input v-model="formData[item.prop]" v-bind="item.attrs" type="textarea" />
+                  </template>
                  <!-- Select 选择器 -->
                  <template v-else-if="item.type === 'select'">
                    <el-select v-model="formData[item.prop]" v-bind="item.attrs">
--- a/src/components/Upload/FileUpload.vue
+++ b/src/components/Upload/FileUpload.vue
@@ -49,7 +49,7 @@ import {
  UploadRequestOptions,
 } from "element-plus";

-import FileAPI, { FileInfo } from "@/api/file";
+import CommonApi, { FileInfo, uploadResponse } from "@/api/account/common";

 const props = defineProps({
  /**
@@ -165,7 +165,7 @@ function handleUpload(options: UploadRequestOptions) {
      formData.append(key, props.data[key]);
    });

-    FileAPI.upload(formData)
+    CommonApi.upload(formData)
      .then((data) => {
        resolve(data);
      })
@@ -187,9 +187,9 @@ const handleProgress = (event: UploadProgressEvent) => {
 /**
 * 上传成功
 */
-const handleSuccess = (fileInfo: FileInfo) => {
+const handleSuccess = (fileInfo: string) => {
  ElMessage.success("上传成功");
-  modelValue.value = [...modelValue.value, fileInfo.url];
+  modelValue.value = [...modelValue.value, fileInfo];
 };

 const handleError = (error: any) => {
@@ -200,19 +200,19 @@ const handleError = (error: any) => {
 * 删除文件
 */
 function handleRemove(fileUrl: string) {
-  FileAPI.delete(fileUrl).then(() => {
-    modelValue.value = modelValue.value.filter((url) => url !== fileUrl);
-  });
+  // CommonApi.delete(fileUrl).then(() => {
+  modelValue.value = modelValue.value.filter((url) => url !== fileUrl);
+  // });
 }

 /**
 * 下载文件
 */
 function handleDownload(file: UploadUserFile) {
-  const { url, name } = file;
-  if (url) {
-    FileAPI.download(url, name);
-  }
+  // const { url, name } = file;
+  // if (url) {
+  //   CommonApi.download(url, name);
+  // }
 }
 </script>
 <style lang="scss" scoped>
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -40,7 +40,7 @@ const isSidebarCollapsed = computed(() => !appStore.sidebar.opened);
 <style lang="scss" scoped>
 .has-logo {
  .el-scrollbar {
-    height: calc(100vh - $navbar-height);
+    height: calc(100vh - $navbar-height - $window-top);
  }
 }
 </style>
--- a/src/views/admim/system/version/config/add.ts
+++ b/src/views/admim/system/version/config/add.ts
@@ -1,7 +1,8 @@
-import UserAPI, { type UserForm } from "@/api/system/user";
+import VersionApi, { type addRequest } from "@/api/system/version";
+import { sourceOptions, typeOptions, isForceOptions } from "./config";
 import type { IModalConfig } from "@/components/CURD/types";

-const modalConfig: IModalConfig<UserForm> = {
+const modalConfig: IModalConfig<addRequest> = {
  pageName: "sys:user",
  dialog: {
    title: "新增版本",
@@ -11,7 +12,9 @@ const modalConfig: IModalConfig<UserForm> = {
  form: {
    labelWidth: 140,
  },
-  formAction: UserAPI.add,
+  formAction: function (data) {
+    return VersionApi.add({ ...data, url: typeof data.url === "string" ? data.url : data.url[0] });
+  },
  beforeSubmit(data) {
    console.log("提交之前处理", data);
  },
@@ -24,11 +27,7 @@ const modalConfig: IModalConfig<UserForm> = {
      attrs: {
        placeholder: "请选择渠道",
      },
-      options: [
-        { label: "桌面端", value: "pc" },
-        { label: "管理端", value: "manager_app" },
-        { label: "电话机点餐", value: "phone_book " },
-      ],
+      options: sourceOptions,
    },
    {
      label: "类型",
@@ -42,11 +41,7 @@ const modalConfig: IModalConfig<UserForm> = {
        xs: 24,
        sm: 12,
      },
-      options: [
-        { label: "windows", value: 0 },
-        { label: "安卓", value: 1 },
-        { label: "iOS", value: 2 },
-      ],
+      options: typeOptions,
    },
    {
      type: "input",
@@ -66,20 +61,27 @@ const modalConfig: IModalConfig<UserForm> = {
        placeholder: "请输入版本号",
      },
      initialValue: 0,
-      options: [
-        { label: "是", value: 1 },
-        { label: "否", value: 0 },
-      ],
+      options: isForceOptions,
    },
    {
      type: "textarea",
      label: "更新提示内容",
-      prop: "version",
-      rules: [{ required: true, message: "请输入版本号", trigger: "blur" }],
+      prop: "message",
+      rules: [{ required: true, message: "请输入更新提示内容", trigger: "blur" }],
      attrs: {
-        placeholder: "请输入版本号",
+        placeholder: "请输入更新提示内容",
      },
    },
+    {
+      type: "custom",
+      label: "版本文件",
+      prop: "url",
+      rules: [{ required: true, message: "请上传版本文件", trigger: "blur" }],
+      attrs: {
+        placeholder: "请上传版本文件",
+      },
+      initialValue: [],
+    },
  ],
 };

--- a/src/views/admim/system/version/config/config.ts
+++ b/src/views/admim/system/version/config/config.ts
@@ -0,0 +1,42 @@
+export const sourceOptions: options[] = [
+  { label: "桌面端", value: "pc" },
+  { label: "管理端", value: "manager_app" },
+  { label: "电话机点餐", value: "phone_book " },
+];
+export const typeOptions: options[] = [
+  { label: "windows", value: "0" },
+  { label: "安卓", value: "1" },
+  { label: "IOS", value: "2" },
+];
+export const isForceOptions: options[] = [
+  { label: "不强制更新", value: 0 },
+  { label: "强制更新", value: 1 },
+];
+
+export type optionsType = "source" | "type" | "isForce";
+
+export function returnOptions(type: optionsType) {
+  if (type === "source") {
+    return sourceOptions;
+  }
+  if (type === "type") {
+    return typeOptions;
+  }
+  if (type === "isForce") {
+    return isForceOptions;
+  }
+}
+
+export function returnOptionsLabel(optionsType: optionsType, value: string | number) {
+  const options = returnOptions(optionsType);
+  if (!options) {
+    return "";
+  }
+  const option = options.find((item) => item.value === value);
+  return option ? option.label : "";
+}
+
+export interface options {
+  label: string;
+  value: string | number;
+}
--- a/src/views/admim/system/version/config/content.ts
+++ b/src/views/admim/system/version/config/content.ts
@@ -1,9 +1,8 @@
 import VersionApi from "@/api/system/version";
-import RoleAPI from "@/api/system/role";
-import type { UserPageQuery } from "@/api/system/user";
+import type { editRequest } from "@/api/system/version";
 import type { IContentConfig } from "@/components/CURD/types";

-const contentConfig: IContentConfig<UserPageQuery> = {
+const contentConfig: IContentConfig<editRequest> = {
  pageName: "sys:user",
  table: {
    border: true,
@@ -19,30 +18,37 @@ const contentConfig: IContentConfig<UserPageQuery> = {
    return VersionApi.getList();
  },
  deleteAction: VersionApi.delete,
-  importsAction(data) {
-    // 模拟导入数据
-    console.log("importsAction", data);
-    return Promise.resolve();
-  },
-  exportsAction: async function (params) {
-    // 模拟获取到的是全量数据
-    const res = await VersionApi.getList(params);
-    console.log("exportsAction", res.list);
-    return res.list;
-  },
+  // modifyAction: function (data) {
+  //   // return VersionApi.edit(data);
+  // },
  pk: "id",
  toolbar: ["add"],
  defaultToolbar: ["refresh", "filter", "search"],
  cols: [
    { type: "selection", width: 50, align: "center" },
    { label: "id", align: "center", prop: "id", width: 100, show: true },
-    { label: "渠道", align: "center", prop: "source" },
+    {
+      label: "渠道",
+      align: "center",
+      prop: "source",
+      width: 120,
+      templet: "custom",
+      slotName: "options",
+    },
    {
      label: "类型",
      align: "center",
      prop: "type",
+      width: 120,
+      templet: "custom",
+      slotName: "options",
+    },
+    {
+      label: "版本号",
+      align: "center",
+      width: 120,
+      prop: "version",
    },
-    { label: "版本号", align: "center", prop: "version" },

    {
      label: "是否强制升级",
@@ -52,6 +58,12 @@ const contentConfig: IContentConfig<UserPageQuery> = {
      templet: "switch",
      slotName: "isForce",
    },
+    {
+      label: "更新内容",
+      align: "center",
+      prop: "message",
+      width: 240,
+    },
    {
      label: "下载地址",
      align: "center",
@@ -65,20 +77,7 @@ const contentConfig: IContentConfig<UserPageQuery> = {
      fixed: "right",
      width: 280,
      templet: "tool",
-      operat: [
-        {
-          icon: "Document",
-          name: "edit",
-          text: "编辑",
-        },
-        {
-          name: "delete",
-          icon: "delete",
-          text: "删除",
-        },
-        "edit",
-        "delete",
-      ],
+      operat: ["edit", "delete"],
    },
  ],
 };
--- a/src/views/admim/system/version/config/edit.ts
+++ b/src/views/admim/system/version/config/edit.ts
@@ -1,116 +1,85 @@
-import UserAPI, { type UserForm } from "@/api/system/user";
+import VersionApi, { type editRequest } from "@/api/system/version";
 import type { IModalConfig } from "@/components/CURD/types";
-import { DeviceEnum } from "@/enums/DeviceEnum";
-import { useAppStore } from "@/store";
+import { sourceOptions, typeOptions, isForceOptions } from "./config";

-const modalConfig: IModalConfig<UserForm> = {
+const modalConfig: IModalConfig<editRequest> = {
  pageName: "sys:user",
-  component: "drawer",
-  drawer: {
-    title: "修改用户",
-    size: useAppStore().device === DeviceEnum.MOBILE ? "80%" : 500,
+  dialog: {
+    title: "编辑版本",
+    width: 800,
+    draggable: true,
  },
  pk: "id",
  formAction: function (data) {
-    return UserAPI.update(data.id as number, data);
+    return VersionApi.edit({ ...data, url: typeof data.url === "string" ? data.url : data.url[0] });
  },
  beforeSubmit(data) {
    console.log("提交之前处理", data);
  },
  formItems: [
    {
-      label: "用户名",
-      prop: "username",
-      rules: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
-      type: "input",
+      label: "渠道",
+      prop: "source",
+      rules: [{ required: true, message: "请选择渠道", trigger: "blur" }],
+      type: "select",
      attrs: {
-        placeholder: "请输入用户名",
-        readonly: true,
+        placeholder: "请选择渠道",
+      },
+      options: sourceOptions,
+    },
+    {
+      label: "类型",
+      prop: "type",
+      rules: [{ required: true, message: "请选择类型", trigger: "blur" }],
+      type: "select",
+      attrs: {
+        placeholder: "请选择类型",
+      },
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+      options: typeOptions,
+    },
+    {
+      type: "input",
+      label: "版本号",
+      prop: "version",
+      rules: [{ required: true, message: "请输入版本号", trigger: "blur" }],
+      attrs: {
+        placeholder: "请输入版本号",
      },
    },
    {
-      label: "用户昵称",
-      prop: "nickname",
-      rules: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
-      type: "input",
+      type: "radio",
+      label: "是否强制更新",
+      prop: "isForce",
+      rules: [{ required: true, message: "请输入版本号", trigger: "blur" }],
      attrs: {
-        placeholder: "请输入用户昵称",
+        placeholder: "请输入版本号",
      },
+      initialValue: 0,
+      options: isForceOptions,
    },
    {
-      label: "所属部门",
-      prop: "deptId",
-      rules: [{ required: true, message: "所属部门不能为空", trigger: "blur" }],
-      type: "tree-select",
+      type: "textarea",
+      label: "更新提示内容",
+      prop: "message",
+      rules: [{ required: true, message: "请输入更新提示内容", trigger: "blur" }],
      attrs: {
-        placeholder: "请选择所属部门",
-        data: [],
-        filterable: true,
-        "check-strictly": true,
-        "render-after-expand": false,
+        placeholder: "请输入更新提示内容",
      },
    },
    {
      type: "custom",
-      label: "性别",
-      prop: "gender",
-      initialValue: 1,
-    },
-    {
-      label: "角色",
-      prop: "roleIds",
-      rules: [{ required: true, message: "用户角色不能为空", trigger: "blur" }],
-      type: "select",
+      label: "版本文件",
+      prop: "url",
+      rules: [{ required: true, message: "请上传版本文件", trigger: "blur" }],
      attrs: {
-        placeholder: "请选择",
-        multiple: true,
+        placeholder: "请上传版本文件",
      },
-      options: [],
      initialValue: [],
    },
-    {
-      type: "input",
-      label: "手机号码",
-      prop: "mobile",
-      rules: [
-        {
-          pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
-          message: "请输入正确的手机号码",
-          trigger: "blur",
-        },
-      ],
-      attrs: {
-        placeholder: "请输入手机号码",
-        maxlength: 11,
-      },
-    },
-    {
-      label: "邮箱",
-      prop: "email",
-      rules: [
-        {
-          pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
-          message: "请输入正确的邮箱地址",
-          trigger: "blur",
-        },
-      ],
-      type: "input",
-      attrs: {
-        placeholder: "请输入邮箱",
-        maxlength: 50,
-      },
-    },
-    {
-      label: "状态",
-      prop: "status",
-      type: "switch",
-      attrs: {
-        activeText: "正常",
-        inactiveText: "禁用",
-        activeValue: 1,
-        inactiveValue: 0,
-      },
-    },
  ],
 };

--- a/src/views/admim/system/version/index.vue
+++ b/src/views/admim/system/version/index.vue
@@ -26,6 +26,9 @@
            {{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
          </el-tag>
        </template>
+        <template #options="scope">
+          {{ returnOptionsLabel(scope.prop, scope.row[scope.prop]) }}
+        </template>
        <template #gender="scope">
          <DictLabel v-model="scope.row[scope.prop]" code="gender" />
        </template>
@@ -45,8 +48,9 @@
        :modal-config="addModalConfig"
        @submit-click="handleSubmitClick"
      >
-        <template #gender="scope">
-          <Dict v-model="scope.formData[scope.prop]" code="gender" />
+        <template #url="scope">
+          <FileUpload v-model="scope.formData[scope.prop]" :limit="1" v-bind="scope.attrs" />
+          <!-- <Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" /> -->
        </template>
      </page-modal>

@@ -56,8 +60,9 @@
        :modal-config="editModalConfig"
        @submit-click="handleSubmitClick"
      >
-        <template #gender="scope">
-          <Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" />
+        <template #url="scope">
+          <FileUpload v-model="scope.formData[scope.prop]" :limit="1" v-bind="scope.attrs" />
+          <!-- <Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" /> -->
        </template>
      </page-modal>
    </template>
@@ -88,6 +93,7 @@ import contentConfig from "./config/content";
 import contentConfig2 from "./config/content2";
 import editModalConfig from "./config/edit";
 import searchConfig from "./config/search";
+import { returnOptionsLabel } from "./config/config";

 const {
  searchRef,
@@ -108,18 +114,20 @@ const {
 async function handleAddClick() {
  addModalRef.value?.setModalVisible();
  // 加载部门下拉数据源
-  addModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
+  // addModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
  // 加载角色下拉数据源
-  addModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
+  // addModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
 }
 // 编辑
 async function handleEditClick(row: IObject) {
  editModalRef.value?.handleDisabled(false);
  editModalRef.value?.setModalVisible();
  // 根据id获取数据进行填充
-  const data = await VersionApi.getFormData(row.id);
-  editModalRef.value?.setFormData(data);
+  // const data = await VersionApi.getFormData(row.id);
+  console.log({ ...row, url: [row.url] });
+  editModalRef.value?.setFormData({ ...row, url: [row.url] });
 }
+1;
 // 其他工具栏
 function handleToolbarClick(name: string) {
  console.log(name);