jbs_front/src/views/sce/tips/index.vue

<template>
  <div style="padding:30px;">
    <!-- 搜索栏 -->
    <div class="search">
      <el-form :inline="true">
        <el-form-item label="剧本标题" prop="leaderId">
        	<el-select filterable remote reserve-keyword
                      @change="queryLc"
                      v-model="queryParams.query.scenarioId"
                      placeholder="请输入剧本标题"
                      @focus.once="queryLcAll"
                      :remote-method="remoteMethod"
                      :loading="loading">
        		          <el-option v-for="item in jbData" :key="item.id" :label="item.title" :value="item.id"></el-option>
                      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :pager-count="5" :current-page.sync="currentPage"
                        :page-size="pagesize" layout="total, prev, pager, next" :total="totalnum">
                      </el-pagination>
        	</el-select>
        </el-form-item>

        <el-form-item label="流程标题:" style="margin-right:50px;">
          <el-select v-model="queryParams.query.processCode" clearable placeholder="请选择流程标题">
            <el-option v-for="item in lcData" :key="item.value" :label="item.title" :value="item.code"></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="500px"
    >
      <el-form ref="form" :model="form" :inline="true" :rules="rules">
        <!-- <el-form-item label="剧本标题:" prop="scenarioId" style="width:100%">
          <el-select
            :disabled="disabled"
            v-model="form.scenarioId"
            clearable
            placeholder="请选择剧本标题"
            style="width:300px"
            @change="chageLc"
          >
            <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%" prop="scenarioId">
        	<el-select filterable remote reserve-keyword
                      @change="queryLcAdd"
                      v-model="form.scenarioId"
                      placeholder="请输入剧本标题"
                      style="width:300px"
                      @focus.once="queryLcAllAdd"
                      :remote-method="remoteMethodAdd"
                      :loading="loading">
        		          <el-option v-for="item in jbData" :key="item.id" :label="item.title" :value="item.id"></el-option>
                      <el-pagination @size-change="handleSizeChangeAdd" @current-change="handleCurrentChangeAdd" :pager-count="5" :current-page.sync="currentPage"
                        :page-size="pagesize" layout="total, prev, pager, next" :total="totalnum">
                      </el-pagination>
        	</el-select>
        </el-form-item>

        <el-form-item label="流程标题:" style="width:100%" prop="processId">
          {{form.processCode}}
          <el-select
            :disabled="disabled"
            v-model="form.processCode"
            clearable
            placeholder="请选择流程标题"
            style="width:300px"
          >
            <el-option
              v-for="item in lcData"
              :key="item.value"
              :label="item.title"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="Tips内容:" style="width:100%" prop="content">
          <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="cancelMitForm">取 消</el-button>
        <el-button v-if="type != 'view'" type="primary" @click="subMitForm()"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  queryJbInfo,
  queryJbInfos,
  queryTipsList,
  addTipsList,
  updateTipsList,
  deteleTipsList,
  queryTipsDetail,
  queryFindList
} from "@/api/sce/sce.js";
export default {
  data() {
    return {
      loading: true,
      currentPage: 1,
      pagesize: 10,
      totalnum: 0,
      title:"",
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        query: {
          scenarioId: undefined,
          processCode: undefined,
          content: undefined
        }
      },
      rules: {
        scenarioId: [
          { required: true, message: "请选择剧本", trigger: "blur" }
        ],
        processCode: [{ required: true, message: "请选择流程", trigger: "blur" }],
        content: [{ required: true, message: "请输入内容", trigger: "blur" }]
      },
      form: {},
      disabled: false,
      dialog: {
        title: "新增",
        Visible: false
      },
      tableData: [],
      jbData: [],
      jbDataAll: [],
      lcData: [],
      total: 0,
      type: "add",
      data: {}
    };
  },
  mounted() {
    // this.queryJbInfos();
    // this.queryFindList();
    this.queryTipsList();
  },
  methods: {
    //获取剧本列表
    // async queryJbInfos() {
    //   try {
    //     let res = await queryJbInfos({});
    //     this.jbData = res.data;
    //   } catch (err) {

    //   }
    // },
    //鼠标获取焦点触发
    queryLcAll(){
      this.remoteMethod('');
    },
    //鼠标获取焦点触发
    queryLcAllAdd(){
      this.remoteMethodAdd('');
    },
    remoteMethod(e) {
    	this.title = e;
      if( this.queryParams.query.scenarioId != this.title){
        this.currentPage = 1;//页码
        console.log(this.currentPage);
      }
    	queryJbInfo({
    		pageSize: this.pagesize,
    		pageNum: this.currentPage,
    		query: {
    			title: this.title,
    		},
    	}).then((res) => {
    		if (res.code == 200) {
            var arr = [];
            arr = res.data.rows.map((item) => {
              return {
                value: item.id,
                title: item.title,
                id : item.id
              };
            });
            this.jbData = arr;
            this.totalnum = parseInt(res.data.total);
        }
    	});
    },
    remoteMethodAdd(e) {
    	this.title = e;
      if( this.form.scenarioId != this.title){
        this.currentPage = 1;//页码
        console.log(this.currentPage);
      }
    	queryJbInfo({
    		pageSize: this.pagesize,
    		pageNum: this.currentPage,
    		query: {
    			title: this.title,
    		},
    	}).then((res) => {
    		if (res.code == 200) {
            var arr = [];
            arr = res.data.rows.map((item) => {
              return {
                value: item.id,
                title: item.title,
                id : item.id
              };
            });
            this.jbData = arr;
            this.totalnum = parseInt(res.data.total);
        }
    	});
    },
    handleSizeChange(val) {
    	this.pagesize = val;
      this.queryParams.query.scenarioId = this.title;
      if( this.queryParams.query.scenarioId != this.title){
        this.currentPage = 1;//页码
        console.log(this.currentPage);
      }
    	this.remoteMethod(this.title);
    },
    handleSizeChangeAdd(val) {
    	this.pagesize = val;
      this.form.scenarioId = this.title;
      if( this.form.scenarioId != this.title){
        this.currentPage = 1;//页码
        console.log(this.currentPage);
      }
    	this.remoteMethodAdd(this.title);
    },
    handleCurrentChange(val) {
    	this.currentPage = val;
      this.queryParams.query.scenarioId = this.title;
    	this.remoteMethod(this.title);
    },
    
    handleCurrentChangeAdd(val) {
    	this.currentPage = val;
      this.form.scenarioId = this.title;
    	this.remoteMethodAdd(this.title);
    },
    //获取流程列表
    async queryFindList() {
      try {
        let res = await queryFindList(this.data);
        this.lcData = res.data;
      } catch (err) {

      }
    },
    queryLc(val) {
      this.data = {
        scenarioId: val
      };
      delete this.queryParams.query.processId;
      this.queryFindList();
      this.$router.push({ name: "Tips/index" });
    },
    queryLcAdd(val) {
      this.data = {
        scenarioId: val
      };
      delete this.form.processId;
      this.queryFindList();
      this.$router.push({ name: "Tips/index" });
    },
    chageLc(val) {
      this.data = {
        scenarioId: val
      };
      delete this.form.processId;
      // this.form.processId =
      this.queryFindList();
    },
    foucsLc() {
    },
    //获取Tips列表
    async queryTipsList() {
      this.loading = true;
      if (this.$route.query.type == "sceinfo") {
        this.remoteMethod(''); //调用所有剧本标题数据
        let res = await queryTipsList(this.queryParams);
          this.jbData.forEach(item=>{
            if(item.id == this.$route.query.scenarioId){
              this.queryParams.query.scenarioId = this.$route.query.scenarioId
              this.data = {
                scenarioId: this.$route.query.scenarioId
              };
              this.queryFindList();
            }
          })
      }
      try {
        let res = await queryTipsList(this.queryParams);
        this.tableData = res.data.rows;
        this.total = res.data.total;
        this.loading = false;
      } catch (err) {

      }
    },
    //搜索
    search() {
      this.queryTipsList();
    },
    refresh() {
      this.$router.push({ name: "Tips/index" });
      this.remoteMethod('');//重置剧本标题搜索
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        query: {
          scenarioId: undefined,
          processId: undefined,
          content: undefined
        }
      };
      this.data = {};
      // this.queryFindList();
      this.queryTipsList();
    },
    // 新增
    handleAdd() {
      this.dialog.title = "新增";
      this.type = "add";
      this.form = {};
      this.lcData = []
      this.disabled = false;
      this.dialog.Visible = true;
    },

    //取消表单
    cancelMitForm(){
      this.remoteMethodAdd('');//重置剧本标题内容
      console.log('123');
      this.dialog.Visible = false
    },
    //提交表单
    async subMitForm() {
      try {
        this.cancelMitForm();//取消表单弹窗
        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) {

      }
    },
    //获取详情
    async queryTipsDetail(id) {
      try {
        let res = await queryTipsDetail(id);
        this.form = res.data;
      } catch (err) {
      }
    },
    //查看详情
    handleView(row) {
      this.queryTipsDetail(row.id);
      this.data = {
        scenarioId: row.scenarioId
      };
      this.queryFindList();
      setTimeout(() => {
        this.dialog.title = "查看";
        this.type = "view";
        this.disabled = true;
        this.dialog.Visible = true;
      }, 500);
    },
    //编辑
    handleEdit(row) {
      this.queryTipsDetail(row.id);
      this.data = {
        scenarioId: row.scenarioId
      };
      this.queryFindList();
      setTimeout(() => {
        this.dialog.title = "编辑";
        this.type = "edit";
        this.disabled = false;
        this.dialog.Visible = true;
      }, 500);
    },
    //删除
    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.queryTipsList();
        } else {
          this.$message({
            message: res.msg,
            type: "error"
          });
        }
      } catch (err) {

      }
    }
  }
};
</script>
<style scoped>
.content {
  background: #fff;
  margin-top: 15px;
}
.add-button {
  margin-top: 15px;
}
.search-button {
  display: flex;
}
</style>