更新表情类型列表

index.html

@@ -7,7 +7,7 @@
   <meta name="renderer" content="webkit" />
   <meta name="viewport"
     content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />
-  <title>羽声语音管理后台</title>
+  <title>秘地管理后台</title>
   <!-- <link rel="icon" href="/favicon.ico" /> -->
   <script>
     window.process = {};

public/platform-config.json

@@ -1,6 +1,6 @@
 {
   "Version": "5.9.0",
-  "Title": "羽声语音管理后台",
+  "Title": "秘地管理后台",
   "FixedHeader": true,
   "HiddenSideBar": false,
   "MultiTagsCache": false,

src/api/modules/expression.ts

@@ -14,23 +14,23 @@ export const queryClassifyList = params => {
 };
 
 // 分类新增
-// export const addClassifyData = data => {
+export const addClassifyData = data => {
-//   return http.request<Result>("post", "/adminapi/GiftLabel/add_label", {
+  return http.request<Result>("post", "/adminapi/RoomEmoji/add_emoji_type", {
-//     data
+    data
-//   });
+  });
-// }
+}
-// // 修改分类
+// 修改分类
-// export const editClassifyData = data => {
+export const editClassifyData = data => {
-//   return http.request<Result>("post", "/adminapi/GiftLabel/edit_label", {
+  return http.request<Result>("post", "/adminapi/RoomEmoji/edit_emoji_type", {
-//     data
+    data
-//   });
+  });
-// }
+}
-// // 删除分类
+// 删除分类
-// export const removeClassifyData = data => {
+export const removeClassifyData = data => {
-//   return http.request<Result>("post", "/adminapi/GiftLabel/del_label", {
+  return http.request<Result>("post", "/adminapi/RoomEmoji/del_emoji_type", {
-//     data
+    data
-//   });
+  });
-// };
+};
 // 列表
 export const queryList = params => {
   return http.request<Result>(

src/views/expression/TypeList/form.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const ruleFormRef = ref();
+const formRules = ref({
+  type_name: [{ required: true, message: "请输入分类名称", trigger: "blur" }],
+});
+const props = defineProps(["formInline"]);
+const newFormInline = ref(
+  props.formInline
+    ? props.formInline
+    : {
+      id: "",
+      type_name: ""
+    }
+);
+function getRef() {
+  return ruleFormRef.value;
+}
+defineExpose({ getRef });
+</script>
+
+<template>
+  <el-form ref="ruleFormRef" :model="newFormInline" :rules="formRules" label-width="120px">
+    <el-form-item label="分类名称" prop="type_name">
+      <el-input v-model="newFormInline.type_name" clearable placeholder="请输入分类名称" />
+    </el-form-item>
+  </el-form>
+</template>

src/views/expression/TypeList/index.vue

@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import { ref, onMounted, h } from "vue";
+import editForm from "./form.vue";
+import { message } from "@/utils/message";
+import { addDialog } from "@/components/ReDialog";
+import {
+  queryClassifyList,
+  addClassifyData,
+  editClassifyData,
+  removeClassifyData
+} from "@/api/modules/expression";
+const typeList = ref([])
+const tableList = ref([])
+const dynamicflowColumns = ref([
+  {
+    label: "ID",
+    prop: "id"
+  },
+  {
+    label: "分类名称",
+    prop: "type_name"
+  },
+  {
+    label: "操作",
+    fixed: "right",
+    width: 210,
+    slot: "operation"
+  }
+])
+const getType = async () => {
+  const { code, data } = await queryClassifyList({})
+  typeList.value = code ? data.map(ele => {
+    return {
+      label: ele.name,
+      value: ele.id
+    }
+  }) : []
+  if (code) {
+    tableList.value = data
+  }
+}
+const formRef = ref(null)
+const handleDelete = async (rowData) => {
+  const { code } = await removeClassifyData({ id: rowData.id });
+  if (code) {
+    message(`您删除了表情名称为【${rowData.type_name}】的这条数据`, {
+      type: "success"
+    });
+    getType();
+  }
+}
+const addTypeName = (title = "新增", rowData: any) => {
+  addDialog({
+    title: `${title}分类`,
+    props: {
+      formInline: {
+        id: rowData?.id ?? "",
+        type_name: rowData?.type_name ?? "",
+        // status: rowData?.status ?? "",
+      }
+    },
+    width: "40%",
+    closeOnClickModal: false,
+    contentRenderer: () => h(editForm, { ref: formRef, formInline: null }),
+    beforeSure: (done, { options }) => {
+      const FormRef = formRef.value.getRef();
+      const curData = options.props.formInline;
+      const saveData = async form => {
+        // console.log(form)
+        const { code, msg } = await addClassifyData(form);
+        if (code) {
+          message("新增成功", { type: "success" });
+          getType();
+          done();
+        } else {
+          message(msg, { type: "error" });
+        }
+      };
+      const updateData = async form => {
+        const { code, msg } = await editClassifyData({
+          ...form,
+          id: rowData.id
+        });
+        if (code) {
+          message("修改成功", { type: "success" });
+          getType();
+          done();
+        } else {
+          message(msg, { type: "error" });
+        }
+      };
+      FormRef.validate(valid => {
+        if (valid) {
+          console.log("curData", curData);
+          // 表单规则校验通过
+          if (title === "新增") {
+            // 实际开发先调用新增接口，再进行下面操作
+            saveData(curData);
+          } else {
+            // 实际开发先调用修改接口，再进行下面操作
+            updateData(curData);
+          }
+        }
+      });
+    }
+  });
+}
+onMounted(() => {
+  getType()
+})
+</script>
+<template>
+  <div class="viewPage" v-if="typeList && typeList.length">
+    <div style="display: inline-flex;justify-content: flex-end;width: 100%;">
+      <el-button type="primary" @click="addTypeName('新增', null)">
+        新增
+      </el-button>
+    </div>
+    <pure-table class="mt-5" ref="tableRef" align-whole="center" showOverflowTooltip table-layout="auto"
+      default-expand-all row-key="id" :adaptiveConfig="{ offsetBottom: 108 }" :data="tableList"
+      :columns="dynamicflowColumns" :header-cell-style="{
+        background: 'var(--el-fill-color-light)',
+        color: 'var(--el-text-color-primary)'
+      }">
+      <template #operation="{ row }">
+        <el-button link type="primary" @click="addTypeName('编辑', row)">
+          编辑
+        </el-button>
+        <el-popconfirm :title="`是否确认删除表情名称为【${row.type_name}】的这条数据`" @confirm="handleDelete(row)">
+          <template #reference>
+            <el-button link type="primary"> 删除 </el-button>
+          </template>
+        </el-popconfirm>
+      </template>
+    </pure-table>
+  </div>
+</template>
+<style lang="scss" scoped>
+.content {
+  width: 100%;
+  background-color: #fff;
+  padding: 20px;
+}
+
+.content-flex {
+  width: 100%;
+  display: inline-flex;
+  background-color: #f5f5f5;
+  padding: 20px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  text-align: center;
+  align-items: center;
+  justify-content: space-between
+}
+</style>

src/views/expression/hook.tsx

@@ -1,5 +1,6 @@
 import { ref, h } from "vue";
 import editForm from "./form.vue";
+import TypeListView from './TypeList/index.vue';
 import { message } from "@/utils/message";
 import {
   queryList,
@@ -177,7 +178,7 @@ export function useData() {
       width: "60%",
       closeOnClickModal: false,
       hideFooter: true,
-      // contentRenderer: () => h(, { ref: formRef, formInline: null })
+      contentRenderer: () => h(TypeListView)
     });
   }
   return {