jbs_front/src/views/nested/menu2/index.vue

<template>
  <div style="padding:30px;">
    <!-- 搜索栏 -->
    <div class="search">
      <el-form :inline="true">
        <el-form-item label="剧本标题:" style="margin-right:50px;">
          <el-select
            v-model="queryParams.query.scenarioId"
            clearable
            placeholder="请选择剧本标题"
          >
            <el-option
              v-for="item in jbData"
              :key="item.value"
              :label="item.title"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="流程标题:" style="margin-right:50px;">
          <el-select
            v-model="queryParams.query.processId"
            clearable
            placeholder="请选择流程标题"
          >
            <el-option
              v-for="item in lcData"
              :key="item.value"
              :label="item.title"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Tips内容:" style="margin-right:50px;">
          <el-input
            clearable
            v-model="queryParams.query.content"
            placeholder="Tips内容"
          />
        </el-form-item>
      </el-form>
      <div class="search-button">
        <el-button
          size="medium"
          type="primary"
          style="height:36px;width:100px;"
          @click="search"
          >搜索</el-button
        >
        <el-button
          size="medium"
          style="margin-left:20px;height:36px;width:100px;"
          @click="refresh"
          >重置</el-button
        >
      </div>
    </div>
    <div class="add-button">
      <el-button
        size="medium"
        type="primary"
        style="height:36px;width:100px;"
        @click="handleAdd"
        >新建</el-button
      >
    </div>
    <!-- 列表 -->
    <div class="content">
      <el-table
        v-loading="loading"
        ref="singleTable"
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column align="center" type="index" label="序号" width="50" />
        <el-table-column
          align="center"
          property="scenarioTitle"
          label="剧本标题"
        />
        <el-table-column
          align="center"
          property="processTitle"
          label="流程名称"
        />
        <el-table-column align="center" property="content" label="Tips内容" />
        <el-table-column align="center" property="likeCount" label="点赞数量" />
        <el-table-column
          align="center"
          property="createTime"
          label="创建时间"
        />
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="handleView(scope.row)"
              ><div style="color:#000;">查看</div></el-button
            >
            <el-button type="text" size="mini" @click="handleEdit(scope.row)"
              ><div style="color:#02A7F0;">编辑</div></el-button
            >
            <el-button type="text" size="mini" @click="hanDel(scope.row)"
              ><div style="color:#D9001B;">删除</div></el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="queryTipsList"
      />
    </div>
    <!-- 新增表单 -->
    <el-dialog
      :title="dialog.title"
      :visible.sync="dialog.Visible"
      center
      width="35%"
    >
      <el-form ref="form" :model="form" :inline="true">
        <el-form-item label="剧本标题:" prop="name" style="width:100%">
          <el-select
            :disabled="disabled"
            v-model="form.scenarioId"
            clearable
            placeholder="请选择剧本标题"
            style="width:300px"
          >
            <el-option
              v-for="item in jbData"
              :key="item.value"
              :label="item.title"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="流程标题:" style="width:100%">
          <el-select
            :disabled="disabled"
            v-model="form.processId"
            clearable
            placeholder="请选择活动区域"
            style="width:300px"
          >
            <el-option
              v-for="item in lcData"
              :key="item.value"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="Tips内容:" style="width:100%">
          <el-input
            :disabled="disabled"
            style="width:300px"
            v-model="form.content"
            type="textarea"
            :rows="6"
            placeholder="请输入内容"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.Visible = false">取 消</el-button>
        <el-button v-if="type != 'view'" type="primary" @click="subMitForm()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  queryJbInfos,
  queryTipsList,
  addTipsList,
  updateTipsList,
  deteleTipsList,
  queryTipsDetail,
  queryFindList
} from "@/api/userInfoApi.js";
export default {
  data() {
    return {
      loading: true,
      queryParams: {
        pageNum: 1,
        pageSize: 15,
        query: {
          scenarioId: undefined,
          processId: undefined,
          content: undefined
        }
      },
      form: {},
      disabled: false,
      dialog: {
        title: "新增",
        Visible: false
      },
      tableData: [],
      jbData: [],
      lcData: [],
      total: 0,
      type: "add"
    };
  },
  mounted() {
    this.queryJbInfos();
    this.queryFindList();
    this.queryTipsList();
  },
  methods: {
    //获取剧本列表
    async queryJbInfos() {
      try {
        let res = await queryJbInfos({});
        // console.log(res.data, "剧本列表");
        this.jbData = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    //获取流程列表
    async queryFindList() {
      try {
        let res = await queryFindList({});
        // console.log(res.data, "流程列表");
        this.lcData = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    //获取Tips列表
    async queryTipsList() {
      this.loading = true;
      try {
        let res = await queryTipsList(this.queryParams);
        this.tableData = res.data.rows;
        this.total = res.data.total;
        this.loading = false;
      } catch (err) {
        console.log(err);
      }
    },
    //搜索
    search() {
      this.queryTipsList();
    },
    refresh() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 15,
        query: {
          scenarioId: undefined,
          processId: undefined,
          content: undefined
        }
      };
      this.queryTipsList();
    },
    // 新增
    handleAdd() {
      this.dialog.title = "新增";
      this.type = 'add'
      this.form = {}
      this.disabled = false;
      this.dialog.Visible = true;
    },
    //提交表单
    async subMitForm() {
      try {
        this.$refs["form"].validate(async valid => {
          if (valid) {
            if (this.type == "add") {
              let res = await addTipsList(this.form);
              if (res.code == 200) {
                this.$message.success("新增成功");
                this.dialog.Visible = false;
                this.form = {};
                this.queryTipsList();
              } else {
                this.$message({
                  message: res.msg,
                  type: "error"
                });
              }
            }
            if(this.type == 'edit'){
              let res = await updateTipsList(this.form);
              if (res.code == 200) {
                this.$message.success("编辑成功");
                this.dialog.Visible = false;
                this.form = {};
                this.queryTipsList();
              } else {
                this.$message({
                  message: res.msg,
                  type: "error"
                });
              }
            }
          }
        });
      } catch (err) {
        console.log(err);
      }
    },
    //获取详情
    async queryTipsDetail(id) {
      try {
        let res = await queryTipsDetail(id);
        // console.log(res, "详情");
        this.form = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    //查看详情
    handleView(row) {
      this.queryTipsDetail(row.id);
      this.dialog.title = "查看";
      this.type = "view";
      this.disabled = true;
      this.dialog.Visible = true;
    },
    //编辑
    handleEdit(row) {
      this.queryTipsDetail(row.id);
      this.dialog.title = "编辑";
      this.type = "edit";
      this.disabled = false;
      this.dialog.Visible = true;
    },
    //删除
    async hanDel(row) {
      try {
        await this.$confirm("此操作将永久删除,是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        });
        let res = await deteleTipsList(row.id);
        if (res.code == 200) {
          this.$message.success("删除成功");
          this.queryList();
        } else {
          this.$message({
            message: res.msg,
            type: "error"
          });
        }
      } catch (err) {
        console.log(err);
      }
    }
  }
};
</script>
<style scoped>
.content {
  background: #fff;
  margin-top: 15px;
}
.add-button {
  margin-top: 15px;
}
.search-button {
  display: flex;
}
</style>