feat: 用户留言管理页面初始化及接口联调

src/api/userDemandManage/index.js

@@ -0,0 +1,44 @@
+import request from "@/utils/request";
+
+// 获取列表 /business/customerMsg/list
+export const getList = (query) => {
+  return request({
+    url: "/business/customerMsg/list",
+    method: "get",
+    params: query,
+  });
+};
+
+// 获取详情 /business/customerMsg/{customerId}
+export const getDetail = (customerId) => {
+  return request({
+    url: `/business/customerMsg/${customerId}`,
+    method: "get",
+  });
+};
+
+// 编辑  /business/customerMsg/edit
+export const editCustomerMsg = (data) => {
+  return request({
+    url: "/business/customerMsg/edit",
+    method: "put",
+    data,
+  });
+};
+
+// 修改阅读状态 /business/customerMsg/updateStatus
+export const editCustomerMsgStatus = (query) => {
+  return request({
+    url: "/business/customerMsg/updateStatus",
+    method: "put",
+    params: query,
+  });
+};
+
+// 删除 ​/business​/customerMsg​/{customerIds}
+export const delCustomerMsg = (customerIds) => {
+  return request({
+    url: `/business/customerMsg/${customerIds}`,
+    method: "delete",
+  });
+};

src/assets/styles/element-ui.css

@@ -0,0 +1,75 @@
+.el-breadcrumb__inner,
+.el-breadcrumb__inner a {
+  font-weight: 400 !important;
+}
+
+.el-upload input[type="file"] {
+  display: none !important;
+}
+
+.el-upload__input {
+  display: none;
+}
+
+.cell .el-tag {
+  margin-right: 0px;
+}
+
+.small-padding .cell {
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+.fixed-width .el-button--mini {
+  padding: 7px 10px;
+  width: 60px;
+}
+
+.status-col .cell {
+  padding: 0 10px;
+  text-align: center;
+}
+
+.status-col .cell .el-tag {
+  margin-right: 0px;
+}
+
+.el-dialog {
+  transform: none;
+  left: 0;
+  position: relative;
+  margin: 0 auto;
+}
+
+.upload-container .el-upload {
+  width: 100%;
+}
+
+.upload-container .el-upload .el-upload-dragger {
+  width: 100%;
+  height: 200px;
+}
+
+.el-dropdown-menu a {
+  display: block;
+}
+
+.el-range-editor.el-input__inner {
+  display: inline-flex !important;
+}
+
+.el-range-separator {
+  box-sizing: content-box;
+}
+
+.el-menu--collapse
+> div
+> .el-submenu
+> .el-submenu__title
+.el-submenu__icon-arrow {
+  display: none;
+}
+
+.el-table .el-table__body tr.unReadClass > td {
+  font-weight: 900;
+}

src/assets/styles/element-ui.min.css

@@ -0,0 +1 @@
+.el-breadcrumb__inner,.el-breadcrumb__inner a{font-weight:400 !important}.el-upload input[type="file"]{display:none !important}.el-upload__input{display:none}.cell .el-tag{margin-right:0px}.small-padding .cell{padding-left:5px;padding-right:5px}.fixed-width .el-button--mini{padding:7px 10px;width:60px}.status-col .cell{padding:0 10px;text-align:center}.status-col .cell .el-tag{margin-right:0px}.el-dialog{transform:none;left:0;position:relative;margin:0 auto}.upload-container .el-upload{width:100%}.upload-container .el-upload .el-upload-dragger{width:100%;height:200px}.el-dropdown-menu a{display:block}.el-range-editor.el-input__inner{display:inline-flex !important}.el-range-separator{box-sizing:content-box}.el-menu--collapse>div>.el-submenu>.el-submenu__title .el-submenu__icon-arrow{display:none}.el-table .el-table__body tr.unReadClass>td{font-weight:900}

src/assets/styles/element-ui.scss

@@ -89,4 +89,13 @@
   > .el-submenu__title
   .el-submenu__icon-arrow {
   display: none;
+}
+
+
+.el-table {
+  .el-table__body tr {
+    &.unReadClass > td {
+      font-weight: 900;
+    }
+  }
 }

src/router/index.js

@@ -102,6 +102,34 @@ export const constantRoutes = [
       },
     ],
   },
+  {
+    path: "/news",
+    component: Layout,
+    redirect: "noredirect",
+    children: [
+      {
+        path: "newsManage",
+        alwaysShow: true,
+        component: () => import("@/views/newsManage/index"),
+        name: "NewsManage",
+        meta: { title: "新闻资讯管理", icon: "dashboard", affix: true },
+      },
+    ],
+  },
+  {
+    path: "/users",
+    component: Layout,
+    redirect: "noredirect",
+    children: [
+      {
+        path: "userDemandManage",
+        alwaysShow: true,
+        component: () => import("@/views/userDemandManage/index"),
+        name: "UserDemandManage",
+        meta: { title: "用户留言管理", icon: "dashboard", affix: true },
+      },
+    ],
+  },
 ];
 
 // 动态路由，基于用户权限动态去加载

src/views/newsManage/components/addJob.vue

@@ -0,0 +1,258 @@
+<template>
+  <div v-loading="loading">
+    <el-form
+      ref="form"
+      :rules="formRules"
+      :model="formData"
+      class="form"
+      label-width="100px"
+    >
+      <el-row :gutter="10">
+        <el-col :span="12">
+          <el-form-item label="职位名称" prop="jobName">
+            <el-input
+              v-model="formData.jobName"
+              maxlength="100"
+              placeholder="请输入职位名称"
+              clearable
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="工作地点" prop="jobLocation">
+            <el-input
+              v-model="formData.jobLocation"
+              maxlength="100"
+              placeholder="请输入工作地点"
+              clearable
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="薪资" prop="salary">
+            <el-input
+              v-model="formData.salary"
+              maxlength="100"
+              placeholder="请输入薪资"
+              clearable
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="资历" prop="seniority">
+            <el-input
+              v-model="formData.seniority"
+              maxlength="100"
+              placeholder="请输入资历"
+              clearable
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="福利" prop="benefit">
+            <el-select
+              style="width: 100%"
+              v-model="formData.benefit"
+              placeholder="请选择福利"
+              multiple
+              clearable
+            >
+              <el-option
+                v-for="dict in benefitOptions"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.label"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="招聘状态" prop="status">
+            <el-select
+              style="width: 100%"
+              v-model="formData.status"
+              placeholder="请选择招聘状态"
+              clearable
+            >
+              <!-- <el-option
+              v-for="dict in dict.type.sys_job_group"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            /> -->
+              <el-option
+                v-for="dict in statusOptions"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="岗位要求" prop="jobRequire">
+            <el-input
+              v-model="formData.jobRequire"
+              type="textarea"
+              :rows="4"
+              placeholder="请输入岗位要求"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="工作职责" prop="jobDuty">
+            <el-input
+              v-model="formData.jobDuty"
+              type="textarea"
+              :rows="4"
+              placeholder="请输入工作职责"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="备注">
+            <el-input
+              v-model="formData.remark"
+              type="textarea"
+              placeholder="请输入备注"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24" style="text-align: right">
+          <el-button type="primary" @click="handleConfirm">确 定</el-button>
+          <el-button @click="handleCancel">取 消</el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  dicts: [],
+  props: {
+    infoData: {
+      type: Object,
+      default: () => {},
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      formData: {
+        jobName: "",
+        jobLocation: "",
+        salary: "",
+        seniority: "",
+        jobRequire: "",
+        jobDuty: "",
+        benefit: [],
+        status: "",
+        remark: "",
+      },
+      benefitOptions: [
+        { value: "1", label: "六险一金" },
+        { value: "2", label: "双休" },
+        { value: "3", label: "年终奖" },
+        { value: "4", label: "调薪" },
+        { value: "5", label: "带薪年假" },
+        { value: "6", label: "节日礼品" },
+        { value: "7", label: "体检" },
+        { value: "8", label: "下午茶" },
+        { value: "9", label: "团建活动" },
+      ],
+      statusOptions: [
+        { value: "0", label: "招聘中" },
+        { value: "1", label: "招聘结束" },
+      ],
+      formRules: {
+        jobName: [
+          { required: true, message: "请输入职位名称", trigger: "blur" },
+        ],
+        jobLocation: [
+          { required: true, message: "请输入工作地点", trigger: "blur" },
+        ],
+        salary: [{ required: true, message: "请输入薪资", trigger: "blur" }],
+        seniority: [{ required: true, message: "请输入资历", trigger: "blur" }],
+        // benefit: [
+        //   {
+        //     type: "array",
+        //     required: true,
+        //     message: "请至少选择一个福利",
+        //     trigger: "change",
+        //   },
+        // ],
+        benefit: [{ required: true, message: "请选择福利", trigger: "change" }],
+        status: [
+          { required: true, message: "请选择招聘状态", trigger: "change" },
+        ],
+        jobRequire: [
+          { required: true, message: "请填写岗位要求", trigger: "blur" },
+        ],
+        jobDuty: [
+          { required: true, message: "请填写工作职责", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  watch: {
+    infoData: {
+      handler(newVal) {
+        if (newVal) {
+          this.formData = {
+            hireInfoId: newVal.hireInfoId || "",
+            jobName: newVal.jobName || "",
+            jobLocation: newVal.jobLocation || "",
+            salary: newVal.salary || "",
+            seniority: newVal.seniority || "",
+            jobRequire: newVal.jobRequire || "",
+            jobDuty: newVal.jobDuty || "",
+            benefit: newVal.benefit ? newVal.benefit.split(",") : [],
+            status: newVal.status || "",
+            remark: newVal.remark || "",
+          };
+          this.$nextTick(() => {
+            this.$refs.form && this.$refs.form.clearValidate();
+          });
+        }
+      },
+      immediate: true,
+    },
+  },
+  created() {},
+  methods: {
+    handleConfirm() {
+      let benefit = this.formData.benefit.join();
+      let obj = {
+        ...this.formData,
+        benefit,
+      };
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          this.$emit("save", obj);
+        } else {
+          this.$message.warning("表单校验不通过，请检查");
+        }
+      });
+    },
+    handleCancel() {
+      this.formData = {
+        jobName: "",
+        jobLocation: "",
+        salary: "",
+        seniority: "",
+        jobRequire: "",
+        jobDuty: "",
+        benefit: [],
+        status: "",
+        remark: "",
+      };
+      this.$refs.form.clearValidate();
+      this.$emit("cancel");
+    },
+  },
+};
+</script>

src/views/newsManage/index.vue

@@ -0,0 +1,349 @@
+<template>
+  <div class="app-container">
+    <!-- 当vue的搜索框form表单有且只有一个输入框时，点击回车，会触发刷新整个页面，
+      可使用 @submit.native.prevent 阻止页面刷新 -->
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+      @submit.native.prevent
+    >
+      <el-form-item label="职位名称">
+        <el-input
+          v-model="queryParams.jobName"
+          placeholder="请输入职位名称"
+          clearable
+          style="width: 240px"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <!-- <el-form-item label="状态" prop="status">
+        <el-select
+          v-model="queryParams.status"
+          placeholder="角色状态"
+          clearable
+          style="width: 240px"
+        >
+          <el-option
+            v-for="dict in dict.type.sys_normal_disable"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item> -->
+      <!-- <el-form-item label="创建时间">
+        <el-date-picker
+          v-model="dateRange"
+          style="width: 240px"
+          value-format="yyyy-MM-dd"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        ></el-date-picker>
+      </el-form-item> -->
+      <el-form-item>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @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="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          >新增</el-button
+        >
+      </el-col>
+      <!-- <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="selectRows.length !== 1"
+          @click="handleUpdate"
+          >编辑</el-button
+        >
+      </el-col> -->
+      <!-- <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="!selectRows.length"
+          @click="handleDelete"
+          >删除</el-button
+        >
+      </el-col> -->
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
+    </el-row>
+
+    <!-- @selection-change="handleSelectionChange" -->
+    <el-table v-loading="loading" :data="tableData">
+      <!-- <el-table-column type="selection" width="55" align="center" /> -->
+      <el-table-column label="职位编号" prop="hireInfoId" width="120" />
+      <el-table-column
+        label="职位名称"
+        prop="jobName"
+        :show-overflow-tooltip="true"
+        width="150"
+      />
+      <el-table-column
+        label="工作地点"
+        prop="jobLocation"
+        :show-overflow-tooltip="true"
+        width="150"
+      />
+      <el-table-column label="薪资" prop="salary" />
+      <el-table-column label="资历" prop="seniority" />
+      <el-table-column label="福利" prop="benefit" />
+
+      <el-table-column label="状态" align="center">
+        <template slot-scope="scope">
+          <el-switch
+            v-model="scope.row.status"
+            active-color="#13ce66"
+            inactive-color="#ff4949"
+            active-value="0"
+            inactive-value="1"
+            @change="changeStatus(scope.row)"
+          >
+          </el-switch>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        width="180"
+      >
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            >修改</el-button
+          >
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.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"
+    />
+
+    <!-- 新增编辑弹窗 width="500px"-->
+    <el-dialog :title="title" :visible.sync="dlgVisible" append-to-body>
+      <addJob
+        :loading="dlgLoading"
+        :infoData="infoData"
+        @save="handleSave"
+        @cancel="handleCancel"
+      ></addJob>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  getList,
+  getDetail,
+  addHireInfo,
+  editHireInfo,
+  editHireInfoStatus,
+  delHireInfo,
+} from "@/api/recruitInfoManage";
+
+import addJob from "./components/addJob.vue";
+
+export default {
+  name: "RecruitInfoManage",
+  components: { addJob },
+  dicts: [],
+  data() {
+    return {
+      // 是否展示筛选项
+      showSearch: true,
+      // 遮罩层
+      loading: true,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        jobName: "",
+      },
+      // 数据量
+      total: 0,
+      // 表格数据
+      tableData: [],
+      // 选中的数据
+      selectRows: [],
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {},
+      // 弹窗相关
+      dlgVisible: false,
+      title: "",
+      infoData: {},
+      dlgLoading: false,
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    // 搜索
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    // 重置
+    resetQuery() {
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 10,
+        jobName: "",
+      };
+      this.getList();
+    },
+    // 查询列表
+    getList() {
+      this.loading = true;
+      getList(this.queryParams)
+        .then((res) => {
+          console.log(res);
+          this.tableData = res.rows;
+          this.total = res.total;
+        })
+        .finally(() => (this.loading = false));
+    },
+    // 新增
+    handleAdd() {
+      this.dlgVisible = true;
+      this.title = "新增";
+      this.infoData = {};
+    },
+    // 修改
+    handleUpdate(row) {
+      this.dlgVisible = true;
+      this.title = "编辑";
+      const hireInfoId = row.hireInfoId
+        ? row.hireInfoId
+        : this.selectRows[0].hireInfoId;
+      this.dlgLoading = true;
+      getDetail(hireInfoId)
+        .then((res) => {
+          console.log(res);
+          this.infoData = res.data;
+        })
+        .finally(() => (this.dlgLoading = false));
+    },
+    // 确认新增/修改
+    handleSave(data) {
+      this.dlgLoading = true;
+      if (data.hireInfoId) {
+        editHireInfo(data)
+          .then((res) => {
+            this.$message.success(res.msg);
+            this.handleCancel();
+            this.getList();
+          })
+          .finally(() => (this.dlgLoading = false));
+      } else {
+        addHireInfo(data)
+          .then((res) => {
+            this.$message.success(res.msg);
+            this.handleCancel();
+            this.getList();
+          })
+          .finally(() => (this.dlgLoading = false));
+      }
+    },
+    // 关闭弹窗
+    handleCancel() {
+      this.dlgVisible = false;
+    },
+    // 删除
+    handleDelete(row) {
+      const ids = this.selectRows.map((item) => item.hireInfoId).join();
+      const hireInfoIds = row.hireInfoId || ids;
+      this.$modal
+        .confirm("是否确认删除数据")
+        .then(function () {
+          return delHireInfo(hireInfoIds);
+        })
+        .then((res) => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {});
+    },
+    handleSelectionChange(selection) {
+      this.selectRows = selection;
+    },
+    // 修改招聘信息状态
+    changeStatus(row) {
+      let params = {
+        hireInfoIds: row.hireInfoId,
+        status: row.status,
+      };
+      // console.log(params, 1211);
+      this.$modal
+        .confirm("是否确认修改状态")
+        .then(function () {
+          return editHireInfoStatus(params);
+        })
+        .then((res) => {
+          this.getList();
+          this.$modal.msgSuccess(res.msg);
+        })
+        .catch((err) => {
+          console.log(err, "err");
+          row.status = row.status === "0" ? "1" : "0";
+        });
+    },
+  },
+};
+</script>

src/views/userDemandManage/components/detail.vue

@@ -0,0 +1,198 @@
+<template>
+  <div v-loading="loading">
+    <el-form
+      ref="form"
+      :rules="formRules"
+      :model="formData"
+      class="form"
+      label-width="100px"
+    >
+      <el-row :gutter="10">
+        <el-col :span="12">
+          <el-form-item label="姓名" prop="customerName">
+            <el-input
+              disabled
+              v-model="formData.customerName"
+              maxlength="100"
+              clearable
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="手机号" prop="customerTel">
+            <el-input
+              disabled
+              v-model="formData.customerTel"
+              maxlength="100"
+              clearable
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="公司名称" prop="customerCompany">
+            <el-input
+              disabled
+              v-model="formData.customerCompany"
+              maxlength="100"
+              clearable
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="公司邮箱" prop="customerEmail">
+            <el-input
+              disabled
+              v-model="formData.customerEmail"
+              maxlength="100"
+              clearable
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="职位" prop="customerPosition">
+            <el-input
+              disabled
+              v-model="formData.customerPosition"
+              maxlength="100"
+              clearable
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="是否订阅资讯" prop="subscribe">
+            <el-switch
+              disabled
+              v-model="formData.subscribe"
+              active-color="#13ce66"
+              inactive-color="#ff4949"
+              active-value="0"
+              inactive-value="1"
+            >
+            </el-switch>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="需求/痛点" prop="customerNeed">
+            <el-input
+              disabled
+              v-model="formData.customerNeed"
+              type="textarea"
+              :rows="4"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item label="沟通内容" prop="content">
+            <el-input
+              :disabled="type === '1'"
+              v-model="formData.content"
+              type="textarea"
+              placeholder="请输入沟通内容"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24" style="text-align: right">
+          <div v-if="type !== '1'">
+            <el-button type="primary" @click="handleConfirm">确 定</el-button>
+            <el-button @click="handleCancel">取 消</el-button>
+          </div>
+          <el-button @click="handleCancel" v-else>关 闭</el-button>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  dicts: [],
+  props: {
+    infoData: {
+      type: Object,
+      default: () => {},
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    type: {
+      // 弹窗类型    1 --- 详情     2 --- 编辑
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      formData: {
+        customerName: "",
+        customerTel: "",
+        customerCompany: "",
+        customerEmail: "",
+        customerPosition: "",
+        subscribe: "",
+        customerNeed: "",
+        content: "",
+      },
+      rules: {
+        content: [
+          { required: true, message: "请输入沟通内容", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  computed: {
+    formRules() {
+      return this.type === "1" ? {} : this.rules;
+    },
+  },
+  watch: {
+    infoData: {
+      handler(newVal) {
+        if (newVal) {
+          this.formData = {
+            customerId: newVal.customerId || "",
+            customerName: newVal.customerName || "",
+            customerTel: newVal.customerTel || "",
+            customerCompany: newVal.customerCompany || "",
+            customerEmail: newVal.customerEmail || "",
+            customerPosition: newVal.customerPosition || "",
+            subscribe: newVal.subscribe || "",
+            customerNeed: newVal.customerNeed || "",
+            content: newVal.content || "",
+          };
+          this.$nextTick(() => {
+            this.$refs.form && this.$refs.form.clearValidate();
+          });
+        }
+      },
+      immediate: true,
+    },
+  },
+  created() {},
+  methods: {
+    handleConfirm() {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          this.$emit("save", this.formData);
+        } else {
+          this.$message.warning("表单校验不通过，请检查");
+        }
+      });
+    },
+    handleCancel() {
+      this.formData = {
+        customerName: "",
+        customerTel: "",
+        customerCompany: "",
+        customerEmail: "",
+        customerPosition: "",
+        subscribe: "",
+        customerNeed: "",
+        content: "",
+      };
+      this.$refs.form.clearValidate();
+      this.$emit("cancel");
+    },
+  },
+};
+</script>

src/views/userDemandManage/index.vue

@@ -0,0 +1,289 @@
+<template>
+  <div class="app-container">
+    <!-- 当vue的搜索框form表单有且只有一个输入框时，点击回车，会触发刷新整个页面，
+      可使用 @submit.native.prevent 阻止页面刷新 -->
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+      @submit.native.prevent
+    >
+      <el-form-item label="姓名">
+        <el-input
+          v-model="queryParams.customerName"
+          placeholder="请输入姓名"
+          clearable
+          style="width: 240px"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置</el-button
+        >
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="tableData" :row-class-name="getClass">
+      <el-table-column label="编号" prop="customerId" align="center" />
+      <el-table-column
+        label="姓名"
+        prop="customerName"
+        align="center"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        label="手机号"
+        prop="customerTel"
+        align="center"
+        :show-overflow-tooltip="true"
+        width="150"
+      />
+      <el-table-column label="公司名称" prop="customerCompany" align="center" />
+      <el-table-column label="公司邮箱" prop="customerEmail" align="center" />
+      <el-table-column label="职位" prop="customerPosition" align="center" />
+
+      <el-table-column label="是否订阅资讯" align="center">
+        <template slot-scope="scope">
+          <el-switch
+            disabled
+            v-model="scope.row.subscribe"
+            active-color="#13ce66"
+            inactive-color="#ff4949"
+            active-value="0"
+            inactive-value="1"
+          >
+          </el-switch>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        width="180"
+      >
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-view"
+            @click="handleLook(scope.row)"
+            >查看</el-button
+          >
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-view"
+            @click="handleUpdate(scope.row)"
+            >编辑</el-button
+          >
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.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"
+    />
+
+    <!-- 详情弹窗 width="500px"-->
+    <el-dialog :title="title" :visible.sync="dlgVisible" append-to-body>
+      <Detail
+        :type="type"
+        :loading="dlgLoading"
+        :infoData="infoData"
+        @save="handleSave"
+        @cancel="handleCancel"
+      ></Detail>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  getList,
+  getDetail,
+  editCustomerMsg,
+  editCustomerMsgStatus,
+  delCustomerMsg,
+} from "@/api/userDemandManage";
+
+import Detail from "./components/detail.vue";
+
+export default {
+  name: "UserDemandManage",
+  components: { Detail },
+  dicts: [],
+  data() {
+    return {
+      // 是否展示筛选项
+      showSearch: true,
+      // 遮罩层
+      loading: true,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        customerName: "",
+      },
+      // 数据量
+      total: 0,
+      // 表格数据
+      tableData: [],
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {},
+      // 弹窗相关
+      dlgVisible: false,
+      title: "",
+      infoData: {},
+      dlgLoading: false,
+      type: "1",
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    // 给表格行添加样式
+    getClass({ row, rowIndex }) {
+      if (row.status !== "1") {
+        return "unReadClass";
+      }
+      return "";
+    },
+    // 搜索
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    // 重置
+    resetQuery() {
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 10,
+        customerName: "",
+      };
+      this.getList();
+    },
+    // 查询列表
+    getList() {
+      this.loading = true;
+      getList(this.queryParams)
+        .then((res) => {
+          console.log(res);
+          this.tableData = res.rows;
+          this.total = res.total;
+        })
+        .finally(() => (this.loading = false));
+    },
+    // 新增
+    handleAdd() {
+      this.dlgVisible = true;
+      this.title = "新增";
+      this.infoData = {};
+    },
+    // 查看
+    handleLook(row) {
+      this.dlgVisible = true;
+      this.title = "详情";
+      this.dlgLoading = true;
+      this.type = "1";
+      getDetail(row.customerId)
+        .then((res) => {
+          console.log(res);
+          this.infoData = res.data;
+        })
+        .finally(() => (this.dlgLoading = false));
+      this.changeStatus(row);
+    },
+    // 修改
+    handleUpdate(row) {
+      this.dlgVisible = true;
+      this.title = "编辑";
+      this.dlgLoading = true;
+      this.type = "2";
+      getDetail(row.customerId)
+        .then((res) => {
+          console.log(res);
+          this.infoData = res.data;
+        })
+        .finally(() => (this.dlgLoading = false));
+      this.changeStatus(row);
+    },
+    // 确认新增/修改
+    handleSave(data) {
+      this.dlgLoading = true;
+      editCustomerMsg(data)
+        .then((res) => {
+          this.$message.success(res.msg);
+          this.handleCancel();
+          this.getList();
+        })
+        .finally(() => (this.dlgLoading = false));
+    },
+    // 关闭弹窗
+    handleCancel() {
+      this.dlgVisible = false;
+    },
+    // 删除
+    handleDelete(row) {
+      this.$modal
+        .confirm("是否确认删除数据")
+        .then(function () {
+          return delCustomerMsg(row.customerId);
+        })
+        .then((res) => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {});
+    },
+    // 修改状态(是否已读)
+    changeStatus(row) {
+      if (row.status === "1") return;
+      let params = {
+        customerIds: row.customerId,
+        status: "1",
+      };
+      editCustomerMsgStatus(params).then(() => this.getList());
+    },
+  },
+};
+</script>