修复diy

src/store/modules/pcdiy.ts

@@ -584,6 +584,7 @@ const usePcdiyStore: any = defineStore('pcdiy', {
       } else if (item.id == 10) {
         //楼层组件
         newItem.styleType = 1;
+        newItem.url = '';
         newItem.imageUrl = '';
         newItem.imgType = 1;
         newItem.imageRadius = 10;
@@ -799,6 +800,9 @@ const usePcdiyStore: any = defineStore('pcdiy', {
         // 富文本
         newItem.detail = '';
         newItem.pageStartBgColor = '#ffffff';
+        newItem.padding.top = 10;
+        newItem.padding.bottom = 10;
+        newItem.padding.both = 10;
       } else if (item.id == 16) {
         // 辅助空白
         newItem.boxHeight = 20;

src/views/diy/fuliDiyIndex.vue

@@ -0,0 +1,188 @@
+<template>
+  <div class="p-2">
+    <div class="head-card">
+      <el-card shadow="hover">
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+          <el-form-item label="页面名称">
+            <el-input v-model="queryParams.name" placeholder="请输入页面名称" clearable @keyup.enter="handleQuery" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </el-card>
+    </div>
+    <el-card shadow="hover">
+      <template #header>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button v-hasPermi="['system:dict:add']" type="primary" plain icon="Plus" @click="handleAdd">添加页面</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button v-hasPermi="['system:dict:remove']" type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()">
+              删除
+            </el-button>
+          </el-col>
+        </el-row>
+      </template>
+      <el-table v-loading="loading" border :data="dataList">
+        <el-table-column label="页面名称" align="center" prop="name" :show-overflow-tooltip="true" />
+        <el-table-column label="页面类型" align="center" :show-overflow-tooltip="true">
+          <template #default="scope">
+            {{
+              scope.row.type == 1
+                ? '平台商城'
+                : scope.row.type == 2
+                  ? '工业品商城'
+                  : scope.row.type == 3
+                    ? '福利商城'
+                    : scope.row.type == 4
+                      ? '客户站点商城'
+                      : ''
+            }}
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" align="center" width="150">
+          <template #default="scope">
+            <el-switch @change="(status) => handleStatusChange(scope.row, status)" v-model="scope.row.isHome" :active-value="1" :inactive-value="0" />
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
+          <template #default="scope">
+            <el-tooltip content="修改" placement="top">
+              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
+            </el-tooltip>
+            <el-tooltip content="删除" placement="top">
+              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { pcDiyList, pcEditDiy } from '@/api/diy/index';
+import { FormInstance } from 'element-plus';
+const dataList = ref<any[]>([]);
+const loading = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const dialogVisible = ref(false);
+// 添加自定义页面
+const formData = reactive({
+  title: '',
+  type: ''
+});
+// 表单验证规则
+const formRules = computed(() => {
+  return {
+    title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
+    type: [{ required: true, message: '请选择页面类型', trigger: 'blur' }]
+  };
+});
+
+const queryParams = ref<any>({
+  pageNum: 1,
+  pageSize: 10,
+  title: '',
+  addon_name: '',
+  type: 3
+});
+
+/** 查询字典类型列表 */
+const getList = () => {
+  loading.value = true;
+  pcDiyList(queryParams.value).then((res) => {
+    if (res.code == 200) {
+      dataList.value = res.rows;
+      total.value = res.total;
+      loading.value = false;
+    }
+  });
+};
+
+/** 表单重置 */
+const reset = () => {};
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+/** 重置按钮操作 */
+const resetQuery = () => {
+  handleQuery();
+};
+/** 新增按钮操作 */
+const router = useRouter();
+const handleAdd = () => {
+  const url = router.resolve({
+    path: '/diy/pcEdit',
+    query: {
+      type: 3,
+      title: '福利商城Diy'
+    }
+  });
+  window.open(url.href);
+};
+/** 修改按钮操作 */
+const handleUpdate = async (row?: any) => {
+  const query = { id: row.id };
+  const url = router.resolve({
+    path: '/diy/pcedit',
+    query
+  });
+  window.open(url.href);
+};
+/** 删除按钮操作 */
+const handleDelete = async (row?: any) => {
+  // await proxy?.$modal.confirm('是否确认删除"' + row.name + '"的diy数据项？').finally(() => (loading.value = false));
+  // await pcDelDiy(row.id);
+  // proxy?.$modal.msgSuccess('删除成功');
+  getList();
+};
+
+const addEvent = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+
+  await formEl.validate(async (valid) => {
+    if (valid) {
+      const query = { type: formData.type, title: formData.title };
+      const url = router.resolve({
+        path: '/diy/pcedit',
+        query
+      });
+      window.open(url.href);
+      dialogVisible.value = false;
+      formData.title = '';
+      formData.type = '';
+    }
+  });
+};
+
+const handleStatusChange = async (row: any, status: any) => {
+  const res = await pcEditDiy({
+    id: row.id,
+    isHome: status
+  });
+  if (res.code == 200) {
+    getList();
+  }
+};
+onMounted(() => {
+  getList();
+});
+</script>
+
+<style lang="scss" scoped>
+.head-card {
+  margin-bottom: 20px;
+
+  :deep(.el-card__body) {
+    padding-bottom: 0px !important;
+  }
+}
+</style>

src/views/diy/industryDiyIndex.vue

@@ -0,0 +1,188 @@
+<template>
+  <div class="p-2">
+    <div class="head-card">
+      <el-card shadow="hover">
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+          <el-form-item label="页面名称">
+            <el-input v-model="queryParams.name" placeholder="请输入页面名称" clearable @keyup.enter="handleQuery" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </el-card>
+    </div>
+    <el-card shadow="hover">
+      <template #header>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button v-hasPermi="['system:dict:add']" type="primary" plain icon="Plus" @click="handleAdd">添加页面</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button v-hasPermi="['system:dict:remove']" type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()">
+              删除
+            </el-button>
+          </el-col>
+        </el-row>
+      </template>
+      <el-table v-loading="loading" border :data="dataList">
+        <el-table-column label="页面名称" align="center" prop="name" :show-overflow-tooltip="true" />
+        <el-table-column label="页面类型" align="center" :show-overflow-tooltip="true">
+          <template #default="scope">
+            {{
+              scope.row.type == 1
+                ? '平台商城'
+                : scope.row.type == 2
+                  ? '工业品商城'
+                  : scope.row.type == 3
+                    ? '福利商城'
+                    : scope.row.type == 4
+                      ? '客户站点商城'
+                      : ''
+            }}
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" align="center" width="150">
+          <template #default="scope">
+            <el-switch @change="(status) => handleStatusChange(scope.row, status)" v-model="scope.row.isHome" :active-value="1" :inactive-value="0" />
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
+          <template #default="scope">
+            <el-tooltip content="修改" placement="top">
+              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
+            </el-tooltip>
+            <el-tooltip content="删除" placement="top">
+              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { pcDiyList, pcEditDiy } from '@/api/diy/index';
+import { FormInstance } from 'element-plus';
+const dataList = ref<any[]>([]);
+const loading = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const dialogVisible = ref(false);
+// 添加自定义页面
+const formData = reactive({
+  title: '',
+  type: ''
+});
+// 表单验证规则
+const formRules = computed(() => {
+  return {
+    title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
+    type: [{ required: true, message: '请选择页面类型', trigger: 'blur' }]
+  };
+});
+
+const queryParams = ref<any>({
+  pageNum: 1,
+  pageSize: 10,
+  title: '',
+  addon_name: '',
+  type: 2
+});
+
+/** 查询字典类型列表 */
+const getList = () => {
+  loading.value = true;
+  pcDiyList(queryParams.value).then((res) => {
+    if (res.code == 200) {
+      dataList.value = res.rows;
+      total.value = res.total;
+      loading.value = false;
+    }
+  });
+};
+
+/** 表单重置 */
+const reset = () => {};
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+/** 重置按钮操作 */
+const resetQuery = () => {
+  handleQuery();
+};
+/** 新增按钮操作 */
+const router = useRouter();
+const handleAdd = () => {
+  const url = router.resolve({
+    path: '/diy/pcEdit',
+    query: {
+      type: 2,
+      title: '工业商城Diy'
+    }
+  });
+  window.open(url.href);
+};
+/** 修改按钮操作 */
+const handleUpdate = async (row?: any) => {
+  const query = { id: row.id };
+  const url = router.resolve({
+    path: '/diy/pcedit',
+    query
+  });
+  window.open(url.href);
+};
+/** 删除按钮操作 */
+const handleDelete = async (row?: any) => {
+  // await proxy?.$modal.confirm('是否确认删除"' + row.name + '"的diy数据项？').finally(() => (loading.value = false));
+  // await pcDelDiy(row.id);
+  // proxy?.$modal.msgSuccess('删除成功');
+  getList();
+};
+
+const addEvent = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+
+  await formEl.validate(async (valid) => {
+    if (valid) {
+      const query = { type: formData.type, title: formData.title };
+      const url = router.resolve({
+        path: '/diy/pcedit',
+        query
+      });
+      window.open(url.href);
+      dialogVisible.value = false;
+      formData.title = '';
+      formData.type = '';
+    }
+  });
+};
+
+const handleStatusChange = async (row: any, status: any) => {
+  const res = await pcEditDiy({
+    id: row.id,
+    isHome: status
+  });
+  if (res.code == 200) {
+    getList();
+  }
+};
+onMounted(() => {
+  getList();
+});
+</script>
+
+<style lang="scss" scoped>
+.head-card {
+  margin-bottom: 20px;
+
+  :deep(.el-card__body) {
+    padding-bottom: 0px !important;
+  }
+}
+</style>

src/views/diy/pcEdit.vue

@@ -44,7 +44,7 @@
             <draggable v-model="diyStore.componentList" item-key="itemKey" class="drag-area" :move="onDragMove">
               <template #item="{ element, index }">
                 <div @click="diyStore.onComponent(element, index)" class="component-bos">
-                  <!-- <div class="component-box" :style="{ borderWidth: diyStore.currentIndex == index ? '2px' : '0px' }"></div> -->
+                  <div class="component-box" :style="{ borderWidth: diyStore.currentIndex == index ? '2px' : '0px' }"></div>
                   <component :is="element.components" :key="element.itemKey" :index="index"></component>
                 </div>
               </template>

src/views/diy/pcList.vue

@@ -53,6 +53,7 @@
         </el-table-column>
         <el-table-column label="状态" align="center" width="150">
           <template #default="scope">
+            <!-- <el-switch v-model="scope.row.isHome" /> -->
             {{ scope.row.isHome == 1 ? '开启' : '关闭' }}
           </template>
         </el-table-column>

src/views/diy/pccomponents/edit/discover-edit.vue

@@ -27,7 +27,7 @@
                 <el-input v-model="diyStore.editComponent.title" placeholder="请输入标题内容" />
               </el-form-item>
               <el-form-item label="链接地址">
-                <el-input v-model="diyStore.editComponent.titleUrl" placeholder="请输入链接地址" />
+                <WebLinkInput v-model="diyStore.editComponent.titleUrl" placeholder="请输入或选择链接" />
               </el-form-item>
             </div>
           </el-form>
@@ -61,7 +61,7 @@
                   <el-input v-model="element.title" placeholder="请输入导航名称" :maxlength="5" show-word-limit />
                 </el-form-item>
                 <el-form-item label="链接地址">
-                  <el-input v-model="element.url" placeholder="请输入链接地址" />
+                  <WebLinkInput v-model="element.url" placeholder="请输入或选择链接" />
                 </el-form-item>
               </div>
             </el-form>
@@ -132,7 +132,7 @@
                   <el-input v-model="element.subtitle" placeholder="请输入标签名称" />
                 </el-form-item>
                 <el-form-item label="链接地址">
-                  <el-input v-model="element.url" placeholder="请输入链接地址" />
+                  <WebLinkInput v-model="element.url" placeholder="请输入或选择链接" />
                 </el-form-item>
               </div>
             </template>
@@ -176,7 +176,7 @@
                   <el-input v-model="element.subtitle" placeholder="请输入标签名称" />
                 </el-form-item>
                 <el-form-item label="链接地址">
-                  <el-input v-model="element.url" placeholder="请输入链接地址" />
+                  <WebLinkInput v-model="element.url" placeholder="请输入或选择链接" />
                 </el-form-item>
               </div>
             </template>
@@ -201,7 +201,7 @@
                   <el-input v-model="element.title" placeholder="请输入导航名称" :maxlength="5" show-word-limit />
                 </el-form-item>
                 <el-form-item label="链接地址">
-                  <el-input v-model="element.url" placeholder="请输入链接地址" />
+                  <WebLinkInput v-model="element.url" placeholder="请输入或选择链接" />
                 </el-form-item>
               </div>
             </el-form>

src/views/diy/pccomponents/edit/floor-edit.vue

@@ -37,7 +37,7 @@
               </div>
             </el-form-item>
             <el-form-item label="链接地址">
-              <el-input v-model="diyStore.editComponent.imageUrl" placeholder="请输入链接地址" />
+              <WebLinkInput v-model="diyStore.editComponent.url" placeholder="请输入或选择链接" />
             </el-form-item>
           </div>
         </el-form>
@@ -109,7 +109,7 @@
               <el-input v-model="diyStore.editComponent.moreTitle" placeholder="请输入按钮文字" />
             </el-form-item>
             <el-form-item label="链接地址" class="flex">
-              <el-input v-model="diyStore.editComponent.moreUrl" placeholder="请输入链接地址" />
+              <WebLinkInput v-model="diyStore.editComponent.moreUrl" placeholder="请输入或选择链接" />
             </el-form-item>
           </el-form>
         </div>

src/views/diy/platformDiyIndex.vue

@@ -0,0 +1,188 @@
+<template>
+  <div class="p-2">
+    <div class="head-card">
+      <el-card shadow="hover">
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+          <el-form-item label="页面名称">
+            <el-input v-model="queryParams.name" placeholder="请输入页面名称" clearable @keyup.enter="handleQuery" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </el-card>
+    </div>
+    <el-card shadow="hover">
+      <template #header>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button v-hasPermi="['system:dict:add']" type="primary" plain icon="Plus" @click="handleAdd">添加页面</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button v-hasPermi="['system:dict:remove']" type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()">
+              删除
+            </el-button>
+          </el-col>
+        </el-row>
+      </template>
+      <el-table v-loading="loading" border :data="dataList">
+        <el-table-column label="页面名称" align="center" prop="name" :show-overflow-tooltip="true" />
+        <el-table-column label="页面类型" align="center" :show-overflow-tooltip="true">
+          <template #default="scope">
+            {{
+              scope.row.type == 1
+                ? '平台商城'
+                : scope.row.type == 2
+                  ? '工业品商城'
+                  : scope.row.type == 3
+                    ? '福利商城'
+                    : scope.row.type == 4
+                      ? '客户站点商城'
+                      : ''
+            }}
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" align="center" width="150">
+          <template #default="scope">
+            <el-switch @change="(status) => handleStatusChange(scope.row, status)" v-model="scope.row.isHome" :active-value="1" :inactive-value="0" />
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
+          <template #default="scope">
+            <el-tooltip content="修改" placement="top">
+              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
+            </el-tooltip>
+            <el-tooltip content="删除" placement="top">
+              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { pcDiyList, pcEditDiy } from '@/api/diy/index';
+import { FormInstance } from 'element-plus';
+const dataList = ref<any[]>([]);
+const loading = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const dialogVisible = ref(false);
+// 添加自定义页面
+const formData = reactive({
+  title: '',
+  type: ''
+});
+// 表单验证规则
+const formRules = computed(() => {
+  return {
+    title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
+    type: [{ required: true, message: '请选择页面类型', trigger: 'blur' }]
+  };
+});
+
+const queryParams = ref<any>({
+  pageNum: 1,
+  pageSize: 10,
+  title: '',
+  addon_name: '',
+  type: 1
+});
+
+/** 查询字典类型列表 */
+const getList = () => {
+  loading.value = true;
+  pcDiyList(queryParams.value).then((res) => {
+    if (res.code == 200) {
+      dataList.value = res.rows;
+      total.value = res.total;
+      loading.value = false;
+    }
+  });
+};
+
+/** 表单重置 */
+const reset = () => {};
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+/** 重置按钮操作 */
+const resetQuery = () => {
+  handleQuery();
+};
+/** 新增按钮操作 */
+const router = useRouter();
+const handleAdd = () => {
+  const url = router.resolve({
+    path: '/diy/pcEdit',
+    query: {
+      type: 1,
+      title: '平台商城Diy'
+    }
+  });
+  window.open(url.href);
+};
+/** 修改按钮操作 */
+const handleUpdate = async (row?: any) => {
+  const query = { id: row.id };
+  const url = router.resolve({
+    path: '/diy/pcedit',
+    query
+  });
+  window.open(url.href);
+};
+/** 删除按钮操作 */
+const handleDelete = async (row?: any) => {
+  // await proxy?.$modal.confirm('是否确认删除"' + row.name + '"的diy数据项？').finally(() => (loading.value = false));
+  // await pcDelDiy(row.id);
+  // proxy?.$modal.msgSuccess('删除成功');
+  getList();
+};
+
+const addEvent = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+
+  await formEl.validate(async (valid) => {
+    if (valid) {
+      const query = { type: formData.type, title: formData.title };
+      const url = router.resolve({
+        path: '/diy/pcedit',
+        query
+      });
+      window.open(url.href);
+      dialogVisible.value = false;
+      formData.title = '';
+      formData.type = '';
+    }
+  });
+};
+
+const handleStatusChange = async (row: any, status: any) => {
+  const res = await pcEditDiy({
+    id: row.id,
+    isHome: status
+  });
+  if (res.code == 200) {
+    getList();
+  }
+};
+onMounted(() => {
+  getList();
+});
+</script>
+
+<style lang="scss" scoped>
+.head-card {
+  margin-bottom: 20px;
+
+  :deep(.el-card__body) {
+    padding-bottom: 0px !important;
+  }
+}
+</style>