yoe-opm-web/src/views/diy/pcDiyIndex.vue

<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 type="primary" plain icon="Plus" @click="handleAdd">添加页面</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button 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="序号" type="index" width="70" align="center" />
        <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
                      ? '客户站点商城'
                      : scope.row.type == 5
                        ? 'PC微页面'
                        : ''
            }}
          </template>
        </el-table-column>
        <el-table-column label="页面链接" align="center" prop="name">
          <template #default="scope">
            <span>/pcIndex?id={{ scope.row.id }}</span>
          </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-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">编辑</el-button>
            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
          </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, pcDelDiy } from '@/api/diy/index';
import { FormInstance } from 'element-plus';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
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: 5
});

/** 查询字典类型列表 */
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: 5,
      title: 'PC微页面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>