栏目管理表单项提示语句全局样式

杨泽宇
1 parent 5309d8b2
Showing 10 changed files with 463 additions and 33 deletions
src/api/property/channel.ts → src/api/property/column.ts
src/components/Uploader/index.vue
src/router/modules/property.ts
src/style/element.scss
src/utils/tool.ts
src/views/column/config.ts
src/views/column/edit.vue
src/views/column/index.vue
src/views/property/edit.vue
src/views/repair/index.vue
@@ -26,7 +26,11 @@ export function columnAdd (data) {
  * @function columnStatus
  */
 export const columnStatus = async ( params: any ) => {
-  let res: any = await request.put( '/column/status', params  )
+  let res: any = await request({
+    method: 'put',
+    url: '/column/status',
+    params: params
+  })
   return res
 }
  
@@ -45,6 +49,10 @@ export const columnStatus = async ( params: any ) =&gt; {
  * @function columnSort
  */
  export const columnSort = async ( params: any ) => {
-  let res: any = await request.put( '/column/sort', params  )
+  let res: any = await request({
+    method: 'put',
+    url: '/column/sort',
+    params: params
+  })
   return res
 }
 \ No newline at end of file
@@ -148,10 +148,6 @@ const emit = defineEmits&lt;{
 .avatar {
   display: block;
 }
-.tip {
-  color: #606266;
-  font-size: 12px;
-}
  
 .square {
   width: 178px;
@@ -14,12 +14,12 @@ const property= {
     component: () => import('@/views/property/edit.vue'),
     meta: { title: '物业编辑' }
   }, {
-    path: '/property/column',
+    path: 'column',
     name: 'column',
     component: () => import('@/views/column/index.vue'),
     meta: { title: '栏目管理' }
   }, {
-    path: '/property/column/edit',
+    path: '/column/edit',
     name: 'columnEdit',
     component: () => import('@/views/column/edit.vue'),
     meta: { title: '栏目编辑' }
@@ -18,4 +18,10 @@
   .el-form-item {
     margin-right: 0;
   }
+}
+
+// 表单项下方注意事项文字样式
+.tip {
+  color: #606266;
+  font-size: 12px;
 }
 \ No newline at end of file
@@ -144,12 +144,12 @@ export function formatTime(time, option) {
  * @returns {string}
  */
 interface EnumData {
-  value: number,
+  value: number | string,
   label: string
 }
 export function globalFilters (value: number, groupData: EnumData[]) {
-  if(groupData.length && (value === 0 || !!value)) {
-    return groupData.find(item => item.value === value)['label']
+  if(groupData.length && (~~value === 0 || !!value)) {
+    return groupData.find(item => ~~item.value === ~~value)['label']
   } else {
     return value
   }
+interface Type {
+  label: string,
+  value: string
+}
+
+// 栏目类型
+export const types: Type[] = [
+  {
+    label: '权威咨询',
+    value: '1'
+  }, {
+    label: '公益活动',
+    value: '2'
+  }, {
+    label: '服务',
+    value: '3'
+  }
+]
 \ No newline at end of file
-<template>栏目编辑</template>
 \ No newline at end of file
+<script setup lang="ts">
+import { reactive, ref, getCurrentInstance, onMounted } from "vue";
+import { columnAdd, columnEdit } from "@/api/property/column";
+import { useRoute } from "vue-router";
+import { back } from "@/utils/tool";
+import { types } from "./config";
+import Uploader from "@/components/Uploader/index.vue";
+import type { ElForm } from "element-plus";
+const {
+  appContext: {
+    config: { globalProperties },
+  },
+} = getCurrentInstance();
+let form = reactive({
+  data: {
+    columnName: "",
+    columnImg: "",
+    cmsColumnId: "",
+    cmsPageId: "",
+    cmsPageType: "",
+    parentColumnId: "",
+    sort: "",
+    status: "0",
+    type: "",
+    parentColumnId: "",
+  },
+  loading: false,
+  dataType: "",
+});
+const ruleFormRef = ref<InstanceType<typeof ElForm>>();
+/**
+ * 表单验证规则
+ */
+const rules = reactive({
+  columnName: [
+    {
+      required: true,
+      message: "请填写栏目名称",
+      trigger: "blur",
+    },
+  ],
+});
+/**
+ * 表单重置
+ */
+const resetForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
+  if (!formEl) return;
+  form.data.status = "0";
+  formEl.resetFields();
+};
+/**
+ * 表单提交
+ */
+const submitForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
+  form.loading = true;
+  if (!formEl) return;
+  formEl.validate(async (valid) => {
+    if (valid) {
+      let res: any;
+      try {
+        if (["add", "subColumn"].includes(form.dataType)) {
+          res = await columnAdd(form.data);
+        } else if (form.dataType === "edit") {
+          res = await columnEdit(form.data);
+        }
+      } catch (e) {
+        console.log(e);
+      } finally {
+        if (res?.data) {
+          globalProperties.$message.success("操作成功");
+          history.go(-1);
+        }
+        form.loading = false;
+      }
+    } else {
+      globalProperties.$message.error("请检查表单格式");
+      form.loading = false;
+      return false;
+    }
+  });
+};
+/**
+ * 图片上传组件回调
+ * @param {string} url 回调的图片url
+ * @param {string} tagName 标签
+ */
+const handleImageChange = (url: string, tagName: string) => {
+  form.data[tagName] = url;
+};
+onMounted(() => {
+  form.dataType = useRoute().query.dataType;
+  switch (form.dataType) {
+    case "edit":
+      form.data = useRoute().query;
+      break;
+    case "subColumn":
+      form.data.parentColumnId = useRoute().query.parentColumnId;
+      break;
+  }
+});
+</script>
+
+<template>
+  <div class="page-container">
+    <el-card class="form_card" style="max-width: 1303px">
+      <h1 v-show="form.dataType === 'add'">新增栏目</h1>
+      <h1 v-show="form.dataType === 'edit'">编辑栏目</h1>
+      <h1 v-show="form.dataType === 'subColumn'">新增子栏目</h1>
+      <el-form
+        :inline="true"
+        :model="form.data"
+        :rules="rules"
+        ref="ruleFormRef"
+        label-width="120px"
+        class="card-form"
+      >
+        <el-form-item label="栏目名称" prop="columnName" style="width: 100%">
+          <el-input
+            v-model.trim="form.data.columnName"
+            placeholder="请填写栏目名称"
+            maxlength="15"
+          />
+        </el-form-item>
+        <!-- 仅一级栏目有type选择 -->
+        <el-form-item
+          label="栏目类型"
+          prop="type"
+          style="width: 50%"
+          v-show="!form.data.parentColumnId"
+        >
+          <el-select v-model="form.data.type" placeholder="请选择栏目类型">
+            <el-option
+              v-for="(item, index) in types"
+              :key="index"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="状态" prop="status" style="width: 50%">
+          <el-radio-group v-model="form.data.status">
+            <el-radio label="1">显示</el-radio>
+            <el-radio label="0">隐藏</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="缩略图" prop="columnImg" style="width: 100%">
+          <Uploader
+            :defaultUrl="{ value: form.data.columnImg }"
+            tagName="columnImg"
+            @imageChange="handleImageChange"
+          ></Uploader>
+        </el-form-item>
+        <el-form-item label="排序" prop="sort" style="width: 50%">
+          <el-input
+            v-model.trim="form.data.sort"
+            placeholder="请填写排序值"
+            maxlength="15"
+          />
+          <span class="tip">注意：排序值越大栏目越靠前</span>
+        </el-form-item>
+        <el-form-item label="CMS页面类型" prop="cmsPageType" style="width: 50%">
+          <el-input
+            v-model.trim="form.data.cmsPageType"
+            placeholder="请填写CMS页面类型"
+            maxlength="15"
+          />
+          <span class="tip">注意：请填写数字</span>
+        </el-form-item>
+        <el-form-item label="CMS栏目ID" prop="cmsColumnId" style="width: 50%">
+          <el-input
+            v-model.trim="form.data.cmsColumnId"
+            placeholder="请填写CMS栏目ID"
+            maxlength="15"
+          />
+        </el-form-item>
+        <el-form-item label="CMS页面ID" prop="cmsPageId" style="width: 50%">
+          <el-input
+            v-model.trim="form.data.cmsPageId"
+            placeholder="请填写CMS页面ID"
+            maxlength="15"
+          />
+        </el-form-item>
+        <el-form-item style="width: 100%">
+          <el-button
+            type="primary"
+            @click="submitForm(ruleFormRef)"
+            :loading="form.loading"
+            >提交</el-button
+          >
+          <el-button
+            type="info"
+            @click="resetForm(ruleFormRef)"
+            v-show="form.dataType === 'add'"
+            >取消</el-button
+          >
+          <el-button type="info" @click="back">返回</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </div>
+</template>
-<template>栏目列表</template>
 \ No newline at end of file
+<script setup lang="ts">
+import { reactive, ref, onMounted, getCurrentInstance } from "vue";
+import { columnList, columnStatus, columnSort } from "@/api/property/column";
+import Pagination from "@/components/Pagination/index.vue";
+import { ElMessageBox } from "element-plus";
+import { types } from "./config";
+import { globalFilters } from "@/utils/tool";
+interface Form {
+  page: number;
+  pageSize: number;
+}
+interface Params {
+  total: number;
+  query: Form;
+}
+interface Data {
+  loading: boolean;
+  list: any[];
+  types: any[];
+  params: Params;
+}
+let instance: ComponentInternalInstance | null = getCurrentInstance();
+let data: Data = reactive({
+  list: [],
+  types: types,
+  loading: false,
+  params: {
+    total: 0,
+    query: {
+      page: 1,
+      pageSize: 10,
+    },
+  },
+});
+/**
+ * 列表
+ */
+const getList = async () => {
+  data.loading = true;
+  try {
+    const res = await columnList(data.params.query);
+    data.list = res?.data?.data?.list;
+    data.params.total = res?.data?.data?.total;
+  } catch (e) {
+    console.log(e);
+  } finally {
+    data.loading = false;
+  }
+};
+/**
+ * 修改
+ * @param {object} obj 要操作的数据对象
+ * @param {string} type 操作类型 => 排序sort 修改状态status 删除delete
+ */
+const handleUpdate = async (obj: any, type: string) => {
+  let res: any;
+  try {
+    switch (type) {
+      case "delete":
+        return ElMessageBox.confirm("确认删除吗?", "警告", {
+          confirmButtonText: "确认",
+          cancelButtonText: "取消",
+          type: "warning",
+        })
+          .then(async () => {
+            res = await columnStatus({ id: obj.id, status: 2 });
+            if (res?.data) {
+              instance?.proxy?.$message.success("操作成功");
+              getList();
+            } else {
+              instance?.proxy?.$message.error("操作失败");
+            }
+          })
+          .catch((error) => {
+            console.log("取消");
+          });
+        break;
+      case "sort":
+        res = await columnSort({ id: obj.id, sort: obj.sort });
+        break;
+      case "status":
+        res = await columnStatus({
+          id: obj.id,
+          status: obj.status ? 0 : 1,
+        });
+        break;
+    }
+    if (res?.data) {
+      instance?.proxy?.$message.success("操作成功");
+      getList();
+    } else {
+      instance?.proxy?.$message.error("操作失败");
+    }
+  } catch (e) {
+    console.log(e);
+  }
+};
+/**
+ * 状态值
+ * @enum {number}
+ */
+enum statusEnum {
+  "隐藏" = 0,
+  "显示",
+  "删除",
+}
+onMounted(() => {
+  getList();
+});
+</script>
+
+<template>
+  <div class="page-container">
+    <h1>栏目列表</h1>
+    <el-row style="padding-bottom: 20px">
+      <el-form :inline="true" label-width="70px">
+        <el-form-item>
+          <el-button type="primary"
+            ><router-link
+              :to="{ path: '/column/edit', query: { dataType: 'add' } }"
+              >创建栏目</router-link
+            ></el-button
+          >
+        </el-form-item>
+      </el-form>
+    </el-row>
+    <el-table
+      :data="data.list"
+      style="width: 100%"
+      border
+      v-loading="data.loading"
+      row-key="id"
+      :indent="30"
+      :tree-props="{ children: 'contentColumnList' }"
+      align="center"
+      element-loading-text="拼命加载中"
+    >
+      <el-table-column prop="id" label="ID" align="center"></el-table-column>
+      <el-table-column
+        prop="columnName"
+        label="栏目名称"
+        align="center"
+      ></el-table-column>
+      <el-table-column prop="type" label="栏目类型" align="center">
+        <template #default="scope">
+          {{
+            scope.row.type
+              ? globalFilters(~~scope.row.type, data.types)
+              : scope.row.type
+          }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="columnImg" label="缩略图" align="center">
+        <template #default="scope">
+          <el-image
+            :src="
+              scope.row.columnImg
+                ? scope.row.columnImg
+                : instance?.proxy?.$defaultImage
+            "
+            fit="contain"
+            lazy
+            style="height: 100px"
+          ></el-image>
+        </template>
+      </el-table-column>
+      <el-table-column prop="sort" label="排序" align="center">
+        <template #default="scope">
+          <el-input
+            v-model="scope.row.sort"
+            placeholder="排序值"
+            @change="handleUpdate(scope.row, 'sort')"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column prop="status" label="状态" align="center">
+        <template #default="scope">
+          {{ statusEnum[scope.row.status] }}
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button type="text">
+            <router-link
+              :to="{
+                path: '/column/edit',
+                query: { ...scope.row, ...{ dataType: 'edit' } },
+              }"
+              >编辑</router-link
+            >
+          </el-button>
+          <el-button type="text" v-show="!scope.row.parentColumnId">
+            <!-- 栏目一共可以有两层 -->
+            <router-link
+              :to="{
+                path: '/column/edit',
+                query: { dataType: 'subColumn', parentColumnId: scope.row.id },
+              }"
+              >子栏目</router-link
+            >
+          </el-button>
+          <el-button type="text" @click="handleUpdate(scope.row, 'status')">{{
+            scope.row.status ? "隐藏" : "显示"
+          }}</el-button>
+          <el-button type="text" @click="handleUpdate(scope.row, 'delete')"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <Pagination
+      :total="data.params.total"
+      v-model:currentPage="data.params.query.page"
+      v-model:pageSize="data.params.query.pageSize"
+      @pageChange="getList"
+    ></Pagination>
+  </div>
+</template>
@@ -29,6 +29,11 @@ let form = reactive({
     status: 0,
   },
 });
+/**
+ * 图片上传组件回调
+ * @param {string} url 回调的图片url
+ * @param {string} tagName 标签
+ */
 const handleImageChange = (url: string, tagName: string) => {
   form.data[tagName] = url;
 };
@@ -64,26 +64,6 @@ const getList = async () =&gt; {
   }
 };
 /**
- * 状态
- * @param {object} obj 要操作的数据对象
- */
-const handleStatus = async (obj) => {
-  try {
-    const res = await roleStatus({
-      roleId: obj.id,
-      status: obj.status ? 0 : 1,
-    });
-    if (res?.data) {
-      globalProperties.$message.success("操作成功");
-      getList();
-    } else {
-      globalProperties.$message.error("操作失败");
-    }
-  } catch (e) {
-    console.log(e);
-  }
-};
-/**
  * 时间组件回调
  * @param {array} value [开始时间, 结束时间]
  */