领域管理

src/views/website/message/index.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="app-container">
+    <el-table v-loading="loading" :data="dataList">
+      <el-table-column label="数据编号" prop="id" align="center" />
+      <el-table-column
+        label="需求内容"
+        prop="content"
+        align="center"
+        show-overflow-tooltip
+      />
+      <el-table-column label="姓名" prop="name" align="center" />
+      <el-table-column label="单位" prop="company" align="center" />
+      <el-table-column label="联系方式" prop="mobile" align="center" />
+      <el-table-column label="邮箱" prop="email" align="center" />
+      <el-table-column label="提交网页地址" prop="area_domain" align="center" />
+      <el-table-column label="处理状态" prop="status" align="center">
+        <template slot-scope="scope">
+          {{
+            statusOptions.find((item) => item.value == scope.row.status).label
+          }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="处理结果"
+        prop="handle_content"
+        align="center"
+        show-overflow-tooltip
+      />
+      <el-table-column label="处理时间" prop="handle_created_at" align="center">
+        <template slot-scope="scope">
+          <span>{{ formatTime(scope.row.handle_created_at) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <template slot-scope="scope" v-if="scope.row.roleId !== 1">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-view"
+            @click="(form = scope.row), (open = true)"
+            >查看</el-button
+          >
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            >删除</el-button
+          >
+          <el-button
+            v-if="scope.row.status != 2"
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            >处理</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+<script setup>
+import { ElMessage, ElMessageBox } from "element-plus";
+import { reactive, toRefs } from "vue";
+import {
+  listMessage,
+  messageDelete,
+  messageHandle,
+} from "@/api/website/message";
+const queryFormRef = ref(null); // 搜索表单ref
+const loading = ref(true); // 是否正在加载
+const dataList = ref([]); // 数据列表
+const total = ref(0); //总数
+const data = reactive({
+  queryParams: {},
+});
+
+const { queryParams } = toRefs(data);
+
+// 重置搜索表单
+const resetQuery = () => {
+  if (queryFormRef.value) {
+    queryFormRef.resetFields();
+  }
+  handleQuery();
+};
+
+// 处理搜索点击
+const handleQuery = () => {
+  queryParams.page_num = 1;
+  getList();
+};
+// 获取列表
+const getList = async () => {
+  loading.value = true;
+  listMessage(this.queryParams).then((res) => {
+    dataList.value = res.data.data;
+    total.value = res.data.count;
+    loading.value = false;
+  });
+};
+// 处理修改
+const handleUpdate = (row) => {
+  ElMessageBox.prompt(`请输入数据编号为${row.id}的处理结果`, "处理", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    closeOnClickModal: false,
+    inputType: "textarea",
+  })
+    .then(({ value }) => {
+      messageHandle({ id: row.id, content: value }).then((response) => {
+        this.getList();
+        this.$modal.msgSuccess("处理成功");
+      });
+    })
+    .catch(() => {});
+};
+/** 删除按钮操作 */
+const handleDelete = (row) => {
+  ElMessageBox.confirm(`是否确认删除编号为${row.id}的数据项？`)
+    .then(() => {
+      return messageDelete({ id: row.id });
+    })
+    .then(() => {
+      getList();
+      ElMessage.success("删除成功");
+    })
+    .catch(() => {});
+};
+</script>