领域管理

2022-07-18 17:34:29 +08:00
parent 6c19bfbd90
commit a4308a1958
13 changed files with 504 additions and 24 deletions
--- a/src/views/platform/industry/index.vue
+++ b/src/views/platform/industry/index.vue
@ -0,0 +1,249 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="Plus"
+          size="small"
+          @click="handleAdd"
+        >
+          新增
+        </el-button>
+      </el-col>
+    </el-row>
+    <!-- <h1>八大领域设置</h1> -->
+    <el-table
+      :data="sysIndustryList"
+      style="width: 100%"
+      v-loading="loading"
+      row-key="id"
+      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+    >
+      <!-- <el-table-column type="expand"></el-table-column> -->
+      <el-table-column prop="name" label="领域名称" />
+      <el-table-column label="操作" align="center">
+        <template #default="props">
+          <el-button
+            size="small"
+            type="text"
+            icon="Edit"
+            @click="handleUpdate(props.row)"
+            >修改</el-button
+          >
+          <el-button
+            size="small"
+            type="text"
+            icon="Delete"
+            @click="handleDelete(props.row)"
+            >删除</el-button
+          >
+          <el-button
+            size="small"
+            type="text"
+            icon="Plus"
+            @click="handleAdd(props.row)"
+            >新增子领域</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 添加或修改领域对话框 -->
+    <el-dialog
+      :title="dialogTitle"
+      v-model="showEditDialog"
+      width="680px"
+      append-to-body
+    >
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="上级领域" prop="parentId">
+          <TreeSelect
+            :objMap="{
+              value: 'id', // ID字段名
+              label: 'name', // 显示名称
+              children: 'children', // 子级字段名
+            }"
+            :options="menuOptions"
+            v-model:value="form.parentId"
+            placeholder="选择上级领域"
+          />
+        </el-form-item>
+        <el-form-item label="领域名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入领域名称" />
+        </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>
+import {
+  listSysIndustry,
+  sysIndustryAdd,
+  sysIndustryEdit,
+  industryDelete,
+} from "@/api/platform/industry.js";
+import { computed, reactive, ref, toRefs } from "vue";
+import TreeSelect from "@/components/TreeSelect";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { cloneDeep } from "lodash";
+// import { resetForm } from "../../../utils/ruoyi";
+const loading = ref(true);
+const sysIndustryList = ref([]); // 领域列表
+const menuOptions = ref([]); // 领域树选项
+const showEditDialog = ref(false); //是否显示编辑、添加弹窗
+const dialogTitle = ref(""); // 弹穿标题
+const formRef = ref(null);
+const data = reactive({
+  form: {},
+  // 表单校验
+  rules: {
+    name: [{ required: true, message: "领域名称不能为空", trigger: "blur" }],
+  },
+});
+const { form, rules } = toRefs(data);
+const getSysIndustryList = async () => {
+  loading.value = true;
+  const { data } = await listSysIndustry();
+
+  setTreeLevel(data);
+  getTreeselect(data);
+  sysIndustryList.value = data;
+  loading.value = false;
+};
+
+/** 转换领域数据结构 */
+const normalizer = (node) => {
+  if (node.children && !node.children.length) {
+    delete node.children;
+  }
+  return {
+    id: node.id,
+    label: node.name,
+    children: node.children,
+  };
+};
+
+/** 查询领域下拉树结构 */
+const getTreeselect = (options) => {
+  const data = setThreeLevelTree(options);
+  menuOptions.value = [];
+  const menu = { id: "", name: "主类目", level: 0, children: [] };
+  menu.children = data;
+  menuOptions.value.push(menu);
+};
+
+const setTreeLevel = (node, index = 1) => {
+  node.forEach((item) => {
+    item["level"] = index;
+    if (item.children && item.children.length) {
+      item.children = setTreeLevel(item.children, index + 1);
+    }
+  });
+  return node;
+};
+
+const setThreeLevelTree = (node) => {
+  return node.map((item) => {
+    const result = { ...item };
+    if (item.children && item.children.length && item.level < 2) {
+      result.children = setThreeLevelTree(item.children);
+    } else {
+      delete result.children;
+    }
+    return result;
+  });
+};
+
+const reset = () => {
+  form.value = {
+    parentId: undefined,
+    name: undefined,
+  };
+  //   resetForm("formRef");
+  if (formRef.value) {
+    formRef.value.resetFields();
+  }
+};
+
+const cancel = () => {
+  showEditDialog.value = false;
+  reset();
+};
+const handleAdd = (row) => {
+  reset();
+  if (row != null && row.parentId != undefined && row.id !== undefined) {
+    form.value.parentId = row.id;
+  } else {
+    form.value.parentId = "";
+  }
+  showEditDialog.value = true;
+  dialogTitle.value = "添加领域";
+};
+/** 修改按钮操作 */
+const handleUpdate = (row) => {
+  reset();
+  form.value = cloneDeep(row);
+
+  showEditDialog.value = true;
+  dialogTitle.value = "修改领域";
+};
+/** 提交按钮 */
+const submitForm = async () => {
+  await formRef.value.validate();
+
+  if (form.value.id) {
+    sysIndustryEdit(form.value).then((response) => {
+      ElMessage.success("修改成功");
+      showEditDialog.value = false;
+      getSysIndustryList();
+    });
+  } else {
+    sysIndustryAdd(form.value).then((response) => {
+      ElMessage.success("新增成功");
+      showEditDialog.value = false;
+      getSysIndustryList();
+    });
+  }
+
+  //   formRef.value.validate((valid) => {
+  //     if (valid) {
+  //       if (form.value.id) {
+  //         console.log(valid);
+  //         industryEdit(form.value).then((response) => {
+  //           ElMessage.success("修改成功");
+  //           showEditDialog.value = false;
+  //           getSysIndustryList();
+  //         });
+  //       } else {
+  //         industryAdd(form.value).then((response) => {
+  //           ElMessage.success("新增成功");
+  //           showEditDialog.value = false;
+  //           getSysIndustryList();
+  //         });
+  //       }
+  //     }
+  //   });
+};
+
+/** 删除按钮操作 */
+const handleDelete = (row) => {
+  ElMessageBox.confirm(`是否确认删除名称为${row.name}的数据项？`, "删除领域", {
+    confirmButtonText: "确认",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(async () => {
+      await industryDelete(row.id);
+      getSysIndustryList();
+      ElMessage.success("删除成功");
+    })
+    .catch(() => {});
+};
+getSysIndustryList();
+</script>
--- a/src/views/website/message/index.vue
+++ b/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>