ConsumSupplier-Platform/src/views/page/system/configure-messages/tableView/index.vue

/*消息配置*/
<template>
  <div class="table-box">
    <el-form>
      <el-form-item style="float: left">
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="dialogAddVisible = true"
          class="lake-Blue"
        >
          新增
        </el-button>
      </el-form-item>
    </el-form>
    <el-table
      ref="multipleTable"
      v-loading="loding"
      :data="tableData"
      element-loading-text="加载中..."
      border
      fit
      highlight-current-row
      height="500"
      @row-dblclick="rowClick"
    >
      <template slot="empty">
        <img src="" alt />
        <p>暂无数据</p>
      </template>
      <el-table-column
        fixed="left"
        align="center"
        type="index"
        label="序号"
        width="50"
      />
      <el-table-column label="消息标题" prop="msgTitle" align="center" />
      <el-table-column label="消息类型" prop="msgType" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.msgType === 'notice'"> 通知 </span>
          <span v-if="scope.row.msgType === 'warning'"> 预警 </span>
          <span v-if="scope.row.msgType === 'inform'"> 告知 </span>
        </template>
      </el-table-column>
      <el-table-column label="消息大类" prop="msgClass" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.msgClass === '1'"> 业务 </span>
          <span v-if="scope.row.msgClass === '0'"> 资质 </span>
          <span v-if="scope.row.msgClass === '2'"> 审核 </span>
          <span v-if="scope.row.msgClass === '3'"> 对账 </span>
          <span v-if="scope.row.msgClass === '4'"> 库存 </span>
        </template>
      </el-table-column>
      <el-table-column label="启用/停用" prop="invdFlag" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.invdFlag"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-value="0"
            inactive-value="1"
            @change="handleSwitch(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="操作"
        #default="{ row }"
        fixed="right"
      >
        <span class="operate-btn" @click.stop="editData(row)">编辑</span>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="crutPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog
      title="消息编辑"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <el-form
        :model="formAdd"
        ref="queryAddForm"
        :inline="true"
        label-width="90px"
        label-position="left"
      >
        <el-form-item label="消息类型" prop="msgType">
          <template slot-scope="scope">
            <el-select v-model="selectedItem.msgType" placeholder="请选择">
              <el-option
                v-for="item in formMsgType"
                :key="item.listId"
                :label="item.listName"
                :value="item.listId"
              ></el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="消息大类" prop="msgClass">
          <template slot-scope="scope">
            <el-select v-model="selectedItem.msgClass" placeholder="请选择">
              <el-option
                v-for="item in formMsgClass"
                :key="item.listId"
                :label="item.listName"
                :value="item.listId"
              ></el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="消息内容">
          <el-input
            style="width: 600px"
            v-model="selectedItem.msgText"
            placeholder="请输入消息内容"
            type="textarea"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-content">
        <el-button
          type="primary"
          icon="el-icon-plus"
          class="lake-Blue Listbutton"
          @click="newAdd(form)"
          >添加行</el-button
        >
        <el-table
          :data="form"
          element-loading-text="加载中..."
          border
          fit
          highlight-current-row
          height="200"
        >
          <el-table-column label="权限类型" prop="msgPermType" align="center">
            <template slot-scope="scope">
              <el-select v-model="scope.row.msgPermType" placeholder="请选择">
                <el-option
                  v-for="item in formBase"
                  :key="item.listId"
                  :label="item.listName"
                  :value="item.listId"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="权限内容" prop="msgPermId" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.msgPermId"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                class="red"
                type="text"
                @click="handleDelete(scope.$index, form)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-button
          type="primary"
          icon="el-icon-plus"
          class="lake-Blue Testbutton"
          @click="newAdd(formEcan)"
          >添加行</el-button
        >
        <el-table
          :data="formEcan"
          element-loading-text="加载中..."
          border
          fit
          highlight-current-row
          height="200"
        >
          <el-table-column
            label="占位符颜色"
            prop="msgColumnColor"
            align="center"
          >
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.msgColumnColor"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in talSelectData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            label="占位符路由"
            prop="msgRoutePath"
            align="center"
          >
            <template slot-scope="scope">
              <el-input v-model="scope.row.msgRoutePath"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="URL" prop="url" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.url"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="占位符" prop="msgHolder" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.msgHolder"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="参数" prop="msgKey" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.msgKey"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                class="red"
                type="text"
                @click="handleDelete(scope.$index, formEcan)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveData()">保存</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="新增消息"
      :visible.sync="dialogAddVisible"
      width="30%"
      :before-close="handleCloseAdd"
    >
      <el-form
        :model="formAdd"
        ref="queryAddForm"
        :inline="true"
        label-width="90px"
        label-position="left"
        :rules="rules"
      >
        <el-form-item label="消息标题" prop="msgTitle">
          <el-input
            v-model.trim="formAdd.msgTitle"
            placeholder="请输入消息标题"
          />
        </el-form-item>
        <el-form-item label="消息类型" prop="msgType">
          <template slot-scope="scope">
            <el-select v-model="formAdd.msgType" placeholder="请选择">
              <el-option
                v-for="item in formMsgType"
                :key="item.listId"
                :label="item.listName"
                :value="item.listId"
              ></el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="消息大类" prop="msgClass">
          <template slot-scope="scope">
            <el-select v-model="formAdd.msgClass" placeholder="请选择">
              <el-option
                v-for="item in formMsgClass"
                :key="item.listId"
                :label="item.listName"
                :value="item.listId"
              ></el-option>
            </el-select>
          </template>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveDataAdd()">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  selectMsgDetl,
  selectListBase,
  saveMsgConfig,
  disabMsgConfig
} from "@/api/system/configure-messages";
export default {
  name: "tableView",
  props: {
    getTableData: {
      type: Object,
      default: {}
    },
    getsearchData: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      loding: false, // 表格数据加载loding
      tableData: [], // 表格数据
      total: 0,
      pageSize: 10,
      crutPage: 1,
      searchData: {},
      dialogVisible: false,
      dialogAddVisible: false,
      talSelectData: [
        { value: "red", label: "红色" },
        { value: "yellow", label: "黄色" },
        { value: "blue", label: "蓝色" }
      ],
      formAdd: {
        msgTitle: "",
        msgType: "",
        msgClass: ""
      },
      formEcan: [],
      formBase: [], //消息配置下拉
      formList: [],
      formMsgClass: [],
      formMsgType: [],
      form: [],
      selectedItem: {}, //存储数据
      rules: {
        msgTitle: [
          {
            required: true,
            message: "标题消息不能为空",
            trigger: "blur"
          }
        ],
        msgType: [
          {
            required: true,
            message: "请选择",
            trigger: "change"
          }
        ],
        msgClass: [
          {
            required: true,
            message: "请选择",
            trigger: "change"
          }
        ]
      }
    };
  },
  created() {
    this.listBase();
  },
  methods: {
    saveDataAdd() {
      this.$refs["queryAddForm"].validate(async valid => {
        if (valid) {
          try {
            const res = await saveMsgConfig(this.formAdd);
            if (res.success === true) {
              this.$message({
                message: "保存成功",
                type: "success"
              });
              this.dialogAddVisible = false;
              this.$emit("refreshData");
              this.formAdd = {};
              this.$nextTick(() => {
                this.$refs["queryAddForm"].clearValidate();
              });
            }
          } catch (error) {
            console.error("保存数据时出错：", error);
            this.$message({
              message: "错误，请稍后再试",
              type: "error"
            });
          }
        } else {
          this.$message({
            message: "请检查表单填写是否正确",
            type: "warning"
          });
        }
      });
    },
    newAdd(rows) {
      const lastRow = rows[rows.length - 1] || {};
      const newRow = JSON.parse(JSON.stringify(lastRow));
      delete newRow.id;
      rows.push(newRow);
    },
    handleDelete(index, rows) {
      rows.splice(index, 1);
    },
    //编辑
    async editData(row) {
      this.selectedItem = { ...row };
      selectMsgDetl({ msgId: row.msgId }).then(res => {
        if (res.success === true) {
          this.form = res.data.permRespDTOS;
          this.formEcan = res.data.placeRespDTOS;
        }
      }),
        (this.dialogVisible = true);
    },
    // 下拉
    async listBase() {
      const [permRes, msgTypeRes, msgClassRes] = await Promise.all([
        selectListBase({ listType: "perm" }),
        selectListBase({ listType: "msgType " }),
        selectListBase({ listType: "msgClass " })
      ]);
      if (permRes.success) {
        this.formBase = permRes.data;
      }
      // if (routeRes.success) {
      //   this.formList = routeRes.data;
      // }
      if (msgTypeRes.success) {
        this.formMsgType = msgTypeRes.data;
      }
      if (msgClassRes.success) {
        this.formMsgClass = msgClassRes.data;
      }
    },

    // 保存数据
    saveData() {
      // const permReqDTOS = this.form.map((item) => ({
      //   id: item.id,
      //   msgId: item.msgId,
      //   msgPermType: item.msgPermType,
      //   msgPermId: item.msgPermId,
      // }));
      // const placeReqDTOS = this.formEcan.map((item) => ({
      //   id: item.id,
      //   msgId: item.msgId,
      //   msgColumnColor: item.msgColumnColor,
      //   msgRoutePath: item.msgRoutePath,
      //   msgHolder: item.msgHolder,
      // }));
      const data = {
        msgId: this.selectedItem.msgId,
        msgClass: this.selectedItem.msgClass,
        msgText: this.selectedItem.msgText,
        msgType: this.selectedItem.msgType,
        msgTitle: this.selectedItem.msgTitle,
        permReqDTOS: this.form,
        placeReqDTOS: this.formEcan
      };
      saveMsgConfig(data).then(res => {
        if (res.success == true) {
          this.$message({
            message: "保存成功",
            type: "success"
          });
          this.dialogVisible = false;
        }
        this.$emit("refreshData");
      });
      this.dialogVisible = false;
    },
    handleClose() {
      this.dialogVisible = false;
      if (this.$refs.create !== undefined) {
        this.$refs.create.resetFields();
      }
    },
    // 启用停用
    handleSwitch(row) {
      let data = {
        msgId: row.msgId,
        type: row.invdFlag == "1" ? "disab" : "enab"
      };
      disabMsgConfig(data)
        .then(res => {
          this.$message({
            message: "操作成功",
            type: "success"
          });
          this.$emit("refreshData");
        })
        .catch(err => {
          console.log(err);
        });
    },
    //每页几条数据
    handleSizeChange(val) {
      this.pageSize = val;
      this.crutPage = 1;
      let tablePam = { size: val, current: 1 };
      this.$emit("pageTruning", tablePam);
    },
    // 当前在第几页
    handleCurrentChange(val) {
      this.crutPage = val;
      let tablePam = { size: this.pageSize, current: val };
      this.$emit("pageTruning", tablePam);
    }
  },
  watch: {
    //表格数据发生改变时重新渲染
    getTableData(newData) {
      console.log("tableData", newData.current);
      let data = newData.records ? newData.records : [];
      this.tableData = data;
      this.total = newData.total ? newData.total : 0;
      this.pageSize = newData.size ? newData.size : 10;
    },
    getsearchData(newData) {
      this.searchData = newData;
    }
  }
};
</script>
<style scoped lang="scss">
.table-box {
  padding: 1px;
  position: relative;
  padding-bottom: 50px;
  .block {
    position: absolute;
    right: 10px;
    bottom: 10px;
  }
  .operate-btn {
    color: #3789ea;
    cursor: pointer;
    margin-left: 10px;
  }
}
.Listbutton {
  margin-bottom: 10px;
}
.Testbutton {
  margin: 10px 0 10px 0;
}
</style>