banner、协议

src/views/website/siteSet/agreement/index.vue

@@ -0,0 +1,272 @@
+<template>
+  <div class="app-container">
+    <el-form
+      :model="queryParams"
+      ref="queryFormRef"
+      v-show="showSearch"
+      :inline="true"
+      @submit.native.prevent
+    >
+      <el-form-item label="所属站点:" prop="tenantId">
+        <el-select
+          v-model="queryParams.tenantId"
+          placeholder="请选择，支持搜索"
+          size="default"
+          filterable
+        >
+          <el-option
+            v-for="item in siteList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          icon="search"
+          size="default"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="refresh" size="default" @click="resetQuery"
+          >重置</el-button
+        >
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="plus"
+          size="default"
+          @click="handleAdd"
+          >新增</el-button
+        >
+      </el-col>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="dataList">
+      <el-table-column label="数据编码" prop="id" align="center" />
+      <el-table-column label="协议名称" prop="title" />
+      <el-table-column label="状态" align="center">
+        <template #default="{ row }">
+          {{ row.status == 1 ? "启用" : "停用" }}
+        </template>
+      </el-table-column>
+      <el-table-column label="所属站点" align="center">
+        <template #default="{ row }">
+          {{ siteList.find((el) => el.id === row.tenantId)?.name || "无" }}
+        </template>
+      </el-table-column>
+      <el-table-column label="更新时间" align="center">
+        <template #default="{ row }">
+          <span>{{ row.updated_at }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <template #default="{ row }">
+          <el-button
+            size="small"
+            type="text"
+            icon="edit"
+            @click="handleUpdate(row)"
+            >编辑</el-button
+          >
+          <el-button
+            size="small"
+            type="text"
+            icon="delete"
+            @click="handleDelete(row)"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+    <!-- 添加或修改对话框 -->
+    <el-dialog :title="title" v-model="showEditDialog" width="40%">
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="所属站点:" prop="tenantId">
+          <el-select
+            v-model="form.tenantId"
+            placeholder="请选择，支持搜索"
+            size="default"
+            filterable
+          >
+            <el-option
+              v-for="item in siteList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="启用状态:" prop="status">
+          <el-radio v-model="form.status" :label="1">启用</el-radio>
+          <el-radio v-model="form.status" :label="2">停用</el-radio>
+        </el-form-item>
+        <el-form-item label="导航名称:" prop="title">
+          <el-input v-model="form.title" placeholder="请输入导航名称" />
+        </el-form-item>
+        <el-form-item label="内容:" prop="content">
+          <!-- <Editor v-model="form.content" :minHeight="150" /> -->
+          <WangEditor v-model="form.content" minHeight="150px" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Agreement">
+import {
+  agreementList,
+  agreementAdd,
+  agreementDetail,
+  agreementEdit,
+  agreementDelete,
+} from "@/api/website/siteSet";
+import { reactive, toRefs } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { tenantSelect } from "@/api/subPlatform/tenant";
+import WangEditor from "../../../../components/WangEditor/index.vue";
+const loading = ref(true); // 是否正在加载
+const showSearch = ref(true); // 是否显示搜索栏
+const showEditDialog = ref(false);
+const queryFormRef = ref(null);
+const formRef = ref(null);
+const siteList = ref([]);
+const total = ref(0);
+const title = ref("");
+const dataList = ref([]);
+
+const data = reactive({
+  queryParams: {
+    title: undefined,
+    tenantId: undefined,
+    pageNum: 1,
+    pageSize: 10,
+  },
+  // 表单参数
+  form: {},
+  rules: {
+    title: [{ required: true, message: "导航名称不能为空", trigger: "blur" }],
+    tenantId: [
+      {
+        required: true,
+        message: "所属站点不能为空",
+        trigger: ["blur", "change"],
+      },
+    ],
+    content: [
+      {
+        required: true,
+        message: "内容不能为空",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+const { queryParams, form, rules } = toRefs(data);
+
+const resetQuery = () => {
+  if (queryFormRef.value) {
+    queryFormRef.value.resetFields();
+  }
+  handleQuery();
+};
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+const getList = async () => {
+  loading.value = true;
+  const resp = await agreementList(queryParams.value);
+  dataList.value = resp.rows;
+  total.value = resp.total;
+  loading.value = false;
+};
+// 获取站点列表
+const getSiteList = async () => {
+  const resp = await tenantSelect();
+  siteList.value = resp.rows;
+};
+// 取消按钮
+const cancel = () => {
+  showEditDialog.value = false;
+  // this.memberOpen = false;
+  reset();
+};
+// 表单重置
+const reset = () => {
+  form.value = {
+    id: undefined,
+    tenantId: undefined,
+    title: undefined,
+    content: "",
+    status: 1,
+  };
+  if (formRef.value) {
+    formRef.value.resetFields();
+  }
+};
+const handleAdd = () => {
+  reset();
+  showEditDialog.value = true;
+  title.value = "新增";
+};
+const handleUpdate = async (row) => {
+  reset();
+  const resp = await agreementDetail(row.id);
+  form.value = resp.data;
+  showEditDialog.value = true;
+  title.value = "修改";
+};
+const submitForm = async () => {
+  await formRef.value.validate();
+  if (form.value.id != undefined) {
+    await agreementEdit(form.value);
+    ElMessage.success("修改成功");
+    showEditDialog.value = false;
+    getList();
+  } else {
+    await agreementAdd(form.value);
+    ElMessage.success("新增成功");
+    showEditDialog.value = false;
+    getList();
+  }
+};
+/** 删除按钮操作 */
+const handleDelete = (row) => {
+  ElMessageBox.confirm(`是否确认删除编号为${row.id}的数据项？`)
+    .then(async () => {
+      await agreementDelete(row.id);
+      getList();
+      ElMessage.success("删除成功");
+    })
+    .catch(() => {});
+};
+getList();
+getSiteList();
+</script>