更新

src/api/modules/nobility.ts

@@ -40,3 +40,15 @@ export const queryUserNobility = params => {
     params
   });
 };
+// 获取爵位装扮列表
+export const queryDecList = params => {
+  return http.request<Result>("get", "/adminapi/Nobility/get_nobility_decorate_list", {
+    params
+  });
+};
+export const deleteDecData = data => {
+  return http.request<Result>("post", "/adminapi/Nobility/del_nobility_decorate", { data });
+};
+export const addDecData = data => {
+  return http.request<Result>("post", "/adminapi/Nobility/add_nobility_decorate", { data });
+};

src/utils/http/config.ts

@@ -1,5 +1,6 @@
-export const URL = "https://1.13.101.98";
+export const URL = "http://test.vespa.xscmmidi.site";
 // https://vespa.qxyushen.top 正式
-//  https://test.vespa.qxyushen.top
+// http://1.13.101.98
+//  https://test.vespa.xscmmidi.site
 // 声网appId 在这里换
 export const appIdBySw = '02f7339ec98947deaeab173599891932';

src/views/Nobility/nobilityList/List/form.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { ref, onBeforeMount } from "vue";
+import { queryAdornmentList } from '@/api/modules/activities'
+const ruleFormRef = ref();
+const formRules = ref({
+  dpid: [{ required: true, message: "请选择  装扮", trigger: "change" }]
+});
+const options = ref([])
+const props = defineProps(["formInline"]);
+const newFormInline = ref(
+  props.formInline
+    ? props.formInline
+    : {
+      dpid: ""
+    }
+);
+const getList = async () => {
+  const { code, data } = await queryAdornmentList()
+  if (code) options.value = data
+}
+onBeforeMount(() => {
+  getList()
+})
+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="dpid">
+      <el-select v-model="newFormInline.dpid" placeholder="请选择装扮">
+        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
+        </el-option>
+      </el-select>
+    </el-form-item>
+  </el-form>
+</template>

src/views/Nobility/nobilityList/List/hook.tsx

@@ -0,0 +1,143 @@
+import { ref, h } from "vue";
+import editForm from "./form.vue";
+import { message } from "@/utils/message";
+import {
+  queryDecList,
+  deleteDecData,
+  addDecData
+} from "@/api/modules/nobility";
+import { addDialog } from "@/components/ReDialog";
+export function useData() {
+  const formRef = ref();
+  const detailData = ref();
+  const loading = ref(true);
+  const tableList = ref([]);
+  const isShow = ref(false);
+  const pagination = ref({
+    total: 0,
+    pageSize: 10,
+    pageSizes: [10, 20, 50, 100],
+    currentPage: 1,
+    background: true
+  });
+  const tableLabel = ref([
+    {
+      label: "ID",
+      prop: "id"
+    },
+    {
+      label: "装扮名称",
+      prop: "decorate_name"
+    },
+    {
+      label: "装扮类型",
+      prop: "decorate_type_name"
+    },
+    {
+      label: "图标",
+      prop: "decorate_image",
+      cellRenderer: ({ row }) => (
+        <el-image
+          fit="cover"
+          preview-teleported={true}
+          src={row.image}
+          preview-src-list={Array.of(row.decorate_image)}
+          class="w-[24px] h-[24px] rounded-full align-middle"
+        />
+      ),
+    },
+    {
+      label: "时长（天数）",
+      prop: "decorate_day"
+    },
+    {
+      label: "操作",
+      fixed: "right",
+      width: 210,
+      slot: "operation"
+    }
+  ]);
+  const onSearch = async () => {
+    loading.value = true;
+    const { data, code } = await queryDecList
+      ({
+        lid: detailData.value.lid,
+        page: pagination.value.currentPage,
+        page_limit: pagination.value.pageSize
+      });
+    if (code) {
+      tableList.value = data.lists;
+      pagination.value.total = data.count;
+      pagination.value.currentPage = data.page;
+    }
+    loading.value = false;
+  };
+  const handleSizeChange = (val: number) => {
+    pagination.value.pageSize = val;
+    onSearch();
+  };
+  const handleCurrentChange = (val: number) => {
+    pagination.value.currentPage = val;
+    onSearch();
+  };
+  const handleDelete = async rowData => {
+    const { code } = await deleteDecData({ id: rowData.id });
+    if (code) {
+      message(`您删除了名称为${rowData.decorate_name}的这条数据`, {
+        type: "success"
+      });
+      onSearch();
+    }
+  };
+  // 新增
+  const openDialog = (title = "新增", rowData: any) => {
+    addDialog({
+      title: `${title}赠送装扮`,
+      props: {
+        formInline: {
+          lid: detailData.value.lid,
+          dpid: rowData?.dpid ?? ""
+        }
+      },
+      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 => {
+          const { code, msg } = await addDecData({
+            lid: detailData.value.lid,
+            dpid: form.dpid
+          });
+          if (code) {
+            message("新增成功", { type: "success" });
+            onSearch();
+            done();
+          } else {
+            message(msg, { type: "error" });
+          }
+        };
+        FormRef.validate(valid => {
+          if (valid) {
+            console.log("curData", curData);
+            saveData(curData);
+          }
+        });
+      }
+    });
+  };
+  return {
+    onSearch,
+    isShow,
+    tableList,
+    tableLabel,
+    pagination,
+    handleSizeChange,
+    handleCurrentChange,
+    loading,
+    handleDelete,
+    openDialog,
+    detailData
+  };
+}

src/views/Nobility/nobilityList/List/index.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { onMounted } from "vue";
+import { useData } from "./hook";
+import { PureTableBar } from "@/components/RePureTableBar";
+import { deviceDetection } from "@pureadmin/utils";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+const props = defineProps(["formInline"]);
+
+import AddFill from "@iconify-icons/ri/add-circle-line";
+const {
+  onSearch,
+  isShow,
+  tableList,
+  pagination,
+  tableLabel,
+  handleSizeChange,
+  handleCurrentChange,
+  handleDelete,
+  loading,
+  openDialog,
+  detailData
+} = useData();
+defineOptions({
+  name: "charmGrade"
+});
+onMounted(() => {
+  detailData.value = props.formInline
+  onSearch();
+});
+</script>
+
+
+<template>
+  <div class="main">
+    <div ref="contentRef" :class="['flex', deviceDetection() ? 'flex-wrap' : '']">
+      <PureTableBar title="" :class="[isShow && !deviceDetection() ? '!w-[60vw]' : 'w-full']" :columns="tableLabel"
+        @refresh="onSearch">
+        <template #buttons>
+          <el-button type="primary" :icon="useRenderIcon(AddFill)" @click="openDialog('新增', {})">
+            新增装扮
+          </el-button>
+        </template>
+        <template v-slot="{ size, dynamicColumns }">
+          <pure-table ref="tableRef" align-whole="center" showOverflowTooltip table-layout="auto" default-expand-all
+            :loading="loading" :size="size" row-key="id" adaptive :adaptiveConfig="{ offsetBottom: 108 }"
+            :data="tableList" :columns="dynamicColumns" :pagination="{ ...pagination, size }" :header-cell-style="{
+              background: 'var(--el-fill-color-light)',
+              color: 'var(--el-text-color-primary)'
+            }" @page-current-change="handleCurrentChange" @page-size-change="handleSizeChange">
+            <template #operation="{ row }">
+              <el-popconfirm :title="`是否确认删除这条数据`" @confirm="handleDelete(row)">
+                <template #reference>
+                  <el-button link type="primary" :size="size"> 删除 </el-button>
+                </template>
+              </el-popconfirm>
+            </template>
+          </pure-table>
+        </template>
+      </PureTableBar>
+    </div>
+  </div>
+</template>
+<style scoped lang="scss"></style>

src/views/Nobility/nobilityList/form.vue

@@ -13,6 +13,7 @@ const formRules = ref({
   day: [{ required: true, message: "请输入购买时长（天）", trigger: "blur" }],
   image: [{ required: true, message: "请上传图标", trigger: "change" }],
   images: [{ required: true, message: "请上传灰色图标", trigger: "change" }],
+  nick_name_color_name: [{ required: true, message: "请选择昵称颜色", trigger: "change" }],
   name: [{ required: true, message: "请输入爵位名称", trigger: "blur" }, { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }]
 });
 const props = defineProps(["formInline"]);
@@ -120,8 +121,13 @@ defineExpose({ getRef });
         <el-checkbox v-for="ele in typeList" :label="ele.id" :key="ele.id">{{ ele.name }}</el-checkbox>
       </el-checkbox-group>
     </el-form-item>
-    <el-form-item label="昵称颜色" prop="nick_name_color">
+    <el-form-item label="昵称颜色" v-if="checkedCities.includes(2)" prop="nick_name_color_name">
-      <el-input v-model="newFormInline.nick_name_color" clearable placeholder="请输入昵称颜色" />
+      <div style="display: inline-flex;">
+        <div style="margin-right: 5px;"><el-color-picker v-model="newFormInline.nick_name_color"></el-color-picker>
+        </div>
+        <el-input v-model="newFormInline.nick_name_color_name" clearable placeholder="请输入昵称颜色" />
+      </div>
+
     </el-form-item>
   </el-form>
 </template>

src/views/Nobility/nobilityList/hook.tsx

@@ -1,5 +1,6 @@
 import { ref, h } from "vue";
 import editForm from "./form.vue";
+import attireList from './List/index.vue'
 import { message } from "@/utils/message";
 import {
   queryList,
@@ -99,6 +100,18 @@ export function useData() {
       onSearch();
     }
   };
+  const openList = (title = "爵位装扮", rowData: any) => {
+    addDialog({
+      title: `查看爵位装扮列表`,
+      props: {
+        formInline: rowData
+      },
+      width: "60%",
+      hideFooter: true,
+      closeOnClickModal: false,
+      contentRenderer: () => h(attireList)
+    });
+  }
   // 新增
   const openDialog = (title = "新增", rowData: any) => {
     addDialog({
@@ -172,6 +185,7 @@ export function useData() {
     handleCurrentChange,
     loading,
     handleDelete,
-    openDialog
+    openDialog,
+    openList
   };
 }

src/views/Nobility/nobilityList/index.vue

@@ -15,7 +15,8 @@ const {
   handleCurrentChange,
   handleDelete,
   loading,
-  openDialog
+  openDialog,
+  openList
 } = useData();
 defineOptions({
   name: "charmGrade"
@@ -44,6 +45,9 @@ onMounted(() => {
               color: 'var(--el-text-color-primary)'
             }" @page-current-change="handleCurrentChange" @page-size-change="handleSizeChange">
             <template #operation="{ row }">
+              <el-button link type="primary" :size="size" @click="openList('爵位装扮', row)">
+                爵位装扮
+              </el-button>
               <el-button link type="primary" :size="size" @click="openDialog('编辑', row)">
                 编辑
               </el-button>

vite.config.ts

@@ -37,7 +37,8 @@ export default ({ mode }: ConfigEnv): UserConfigExport => {
               proxyReq.method = 'OPTIONS';
               // 设置CORS头  https://admin.qxyushen.top
               // https://test.vespa.qxyushen.top
-              res.setHeader('Access-Control-Allow-Origin', 'https://admin.vespa.xscmmidi.site');
+              // 'http://admin.vespa.xscmmidi.site'
+              res.setHeader('Access-Control-Allow-Origin', 'https://test.vespa.qxyushen.top');
               res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
               res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
               res.end();