fire_control/src/view/dispatch/leaveMsg.vue

<template>
  <com-dialog
    title="留言"
    enterText="发表留言"
    :show="show"
    power="message:add"
    @submit="oper.readyInsert"
    @update:show="val => $emit('update:show', val)"
  >
    <div class="body-layer" style="padding: 0">
      <el-table
        ref="multipleTable"
        :data="dataList.state"
        tooltip-effect="dark"
        style="width: 100%;min-height:540px;max-height:540px"
        :span-method="arraySpanMethod"
      >
        <el-table-column label="留言内容"  prop="content" v-slot:default="{ row }">
          
          <el-tooltip class="item" effect="dark" :content="row.content" placement="bottom-start" v-if="row.content && row.content.length > 30">
            <a class="msg-content">
              {{row.content.substr(0, 30)}}...
            </a>
          </el-tooltip>
          <a class="msg-content" v-else>
            {{row.content}}
          </a>
          
          
        </el-table-column>
        <el-table-column label="创建人" prop="userName" width="150"></el-table-column>
        <el-table-column label="创建日期" prop="createTime" v-slot:default="{row}" width="150">
          {{dateFormat(row.createTime)}}
        </el-table-column>
      </el-table>

      <com-pagination
        @size-change="pag.sizeChange"
        @current-change="pag.currentChange"
        :current-page="pag.state.currPage"
        :sizes="[10, 20]"
        :page-size="pag.state.size"
        :hide-sizes="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pag.state.total"/>
    </div>
  </com-dialog>

  
  <com-dialog
    title="发表留言"
    v-model:show="oper.state.show"
    enterText="确 定"
    width="540"
    @submit="submit"
  >
    <el-form ref="form" :model="form" label-width="84px" class="leave-from">
      <el-input
        type="textarea"
        placeholder="请输入留言内容，限200字"
        maxlength="200"
        show-word-limit
        v-model="oper.state.content">
      </el-input>
    </el-form>
  </com-dialog>

</template>

<script>
import getTableState from "@/state/tableRef";
import {
  getMessageList,
  insertMessage,
} from '@/request/config'
import comDialog from "@/components/dialog";
import comPagination from "@/components/pagination";
import { watch } from 'vue';
import { dateFormat } from '@/util'

export default {
  name: 'archives',
  props: ['show', 'data'],
  setup(props) {
    console.log(props)
    const state = getTableState({
      getUrl: getMessageList,
      insertUrl: insertMessage,
      searchAttr: {pageSize: 10, projectId: props.data},
      operAttr: {
        content: '',
        projectId: props.data
      },
    });
    
    watch(props, () => {
      if (props.data === state.search.value.state.projectId) return
      state.search.value.state.projectId = props.data
      state.dataList.value.refer()
    })

    return { ...state, dateFormat(date) {
      // console.log()
      return dateFormat(new Date(date), 'yyyy-MM-dd hh:mm')
    } };
  },
  methods: {
    async submit() {
        this.oper.state.projectId = this.search.state.projectId
        if (!this.oper.state.content.trim()) {
          return this.$message.error('留言内容不能为空！', '提示')
        }
        try {
          await this.oper.state.id ? this.oper.update() : this.oper.insert()
        } catch {
          console.error('留言失败')
        }
    }
  },
  components: {
    "com-pagination": comPagination,
    "com-dialog": comDialog,
  }
};
</script>

<style lang="scss" scoped>
.table-ctrl-right {
  .search-scene {
    margin: 0 20px 0 26px;
  }
  i {
    margin-left: 20px;
    font-size: 1.7rem;
    vertical-align: middle;
    cursor: pointer;

    &.active {
      color: var(--primaryColor);
    }
  }
}

.leave-from {
  // width: 520px;
  margin: 0 auto;
}

.title {
  font-weight: bold;
  color: #26559B;
  line-height: 19px;
  font-size: 14px;
}

.msg-content {
  overflow:hidden; //超出的文本隐藏
  text-overflow:ellipsis; //溢出用省略号显示
  white-space:nowrap; //溢出不换行
  position: relative;
  cursor: pointer;
}
</style>

<style>
.leave-from textarea {
  height: 200px;
}
.el-popper:not(.el-cascader__dropdown) .el-popper__arrow {
  /* display: none !important; */
}
</style>