sl-sfy-safety/src/views/message/systemNotifications/components/problemHandleTable.vue

<template>
  <div>
    <div style="padding-bottom: 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.06)">
      <div class="pushWorkShopBar">
        <span class="pushiWorkShopSpan">推送车间</span>
        <img src="../img/edit.png" @click="handleWorkShopEdit()" />
        <span class="descriptionSpan">请点击编辑按钮，选择需要发送问题处理通知</span>
      </div>
      <div class="workshopList">
        <div class="left" ref="listLeft">
          <el-tag type="primary" v-for="item in selectedUser" :key="item.code">
            {{ item.name }}
          </el-tag>
        </div>
        <div v-if="!isExpandShow" class="right" @click="toExpand()">
          <div
            style="display: flex; height: 24px; justify-content: center; align-items: center"
            v-if="isExpand"
          >
            <span>展开</span><img src="@/assets/icons/arrow_bottom.png" />
          </div>
          <div
            style="display: flex; height: 24px; justify-content: center; align-items: center"
            v-else
          >
            <span>收起</span><img src="@/assets/icons/arrow_top.png" />
          </div>
        </div>
      </div>
    </div>

    <el-table
      :data="problemTableData"
      stripe
      height="calc(100vh - 400px)"
      :cell-style="{ textAlign: 'center' }"
      :header-cell-style="{ 'text-align': 'center' }"
      style="width: 100%; margin-top: 16px; --el-table-border-color: none"
    >
      <el-table-column width="156" prop="issuePhase" label="问题阶段" />

      <el-table-column width="176" prop="issueState" label="审核状态">
        <template #default="scope">
          <el-tag type="warning" v-if="scope.row.issueState === 1">
            {{ issueStateMapping[scope.row.issueState] }}
          </el-tag>
          <el-tag type="danger" v-else-if="scope.row.issueState === 6">
            {{ issueStateMapping[scope.row.issueState] }}
          </el-tag>
          <el-tag type="success" v-else-if="scope.row.issueState === 7">
            {{ issueStateMapping[scope.row.issueState] }}
          </el-tag>
          <el-tag type="primary" v-else>{{ issueStateMapping[scope.row.issueState] }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column width="156" prop="recipient" label="推送对象" />

      <el-table-column width="520" prop="content" label="推送文案" />

      <el-table-column label="操作" fixed="right">
        <template #default="scope">
          <div class="operation">
            <el-tooltip class="box-item" effect="light" content="编辑" placement="bottom">
              <img
                src="../img/edit.png"
                @click="handleProbleEdit(scope.row.id, scope.row.content)"
              />
            </el-tooltip>
          </div>
        </template>
      </el-table-column>

      <template #empty>
        <div class="emptyDiv">
          <img src="../img/empty.png" class="emptyImg" />
          <span class="emptySpan">暂无数据</span>
        </div>
      </template>
    </el-table>
    <el-dialog
      v-model="workDialog"
      title="添加推送车间"
      align-center
      :close-on-click-modal="false"
      style="height: 583px"
      :width="731"
      :destroy-on-close="true"
      class="workShopDialog"
    >
      <WorkShopTree @cancel="handleCancle" @submit="handleSubmit" :selectedUser="selectedUser" />
    </el-dialog>
    <el-dialog
      v-model="showDialog"
      title="请输入推送文案"
      align-center="true"
      width="400"
      @close="closeDialog()"
      :close-on-click-modal="false"
      class="contentDialog"
    >
      <el-input
        v-model="content"
        style="width: 380px; padding: 0 65px 0 0"
        :autosize="{ minRows: 1, maxRows: 4 }"
        maxlength="100"
        show-word-limit
        type="textarea"
      />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDialog()">取消</el-button>
          <el-button type="primary" @click="submitDialog()">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, nextTick } from 'vue';
import { problemPhase, issueStateMapping } from '../type';
import {
  queryIssueProcessMessage,
  modifyContent,
  modifyWorkshopList,
  queryWorkshopNamebyIds,
} from '../api/index';
import WorkShopTree from './WorkShopTree.vue';
import { ElMessage } from 'element-plus';
const problemTableData = ref<problemPhase[]>([]);
const workDialog = ref<boolean>(false);
const showDialog = ref<boolean>(false);
const content = ref<string>('');
const listLeft = ref();
const isExpandShow = ref<boolean>(false);
const isExpand = ref<boolean>(true);
const toExpand = () => {
  isExpand.value = !isExpand.value;
  if (isExpand.value) {
    listLeft.value.style.maxHeight = '24px';
  } else {
    listLeft.value.style.maxHeight = 'none';
  }
};
const editId = ref<number>(0);
const handleWorkShopEdit = () => {
  workDialog.value = true;
};
const handleProbleEdit = (id: number, _content: string) => {
  showDialog.value = true;
  editId.value = id;
  content.value = _content;
};

const submitDialog = () => {
  modifyContent(content.value, editId.value)
    .then(() => {
      ElMessage({
        message: '修改成功',
        type: 'success',
        plain: true,
      });
      closeDialog();
      queryIssueData();
    })
    .catch((error) => {
      console.error(error);
    });
};

const closeDialog = () => {
  showDialog.value = false;
};
interface UserList {
  code: number | string;
  name: string;
  id: number;
}
const selectedUser = ref<UserList[]>([]);
const queryIssueData = () => {
  queryIssueProcessMessage().then((res) => {
    let params;
    if (res[0].workshopList) {
      params = JSON.parse(res[0].workshopList);
    } else {
      params = [];
    }
    queryWorkshopNamebyIds(params).then((res) => {
      selectedUser.value = res;
      nextTick(() => {
        const height = listLeft.value.scrollHeight;
        isExpandShow.value = height > 24 ? false : true;
      });
    });
    problemTableData.value = res;
  });
};
const handleCancle = () => {
  workDialog.value = false;
};
const handleSubmit = (selectedData: UserList[]) => {
  const params = selectedData.map((item) => item.id);
  modifyWorkshopList(params).then(() => {
    ElMessage({
      message: '添加成功',
      type: 'success',
      plain: true,
    });
    workDialog.value = false;
    queryIssueData();
  });
};
onMounted(() => {
  queryIssueData();
});
</script>
<style lang="scss" scoped>
.pushWorkShopBar {
  margin: 24px 0 0 0;
  display: flex;
  img {
    cursor: pointer;
  }
  :nth-of-type(1) {
    margin-right: 12px;
    margin-bottom: 16px;
  }
  .pushiWorkShopSpan {
    width: 56px;
    height: 20px;
    font-weight: 600;
    font-size: 14px;
    color: #303133;
    line-height: 20px;
  }
  .descriptionSpan {
    width: 250px;
    height: 14px;
    font-weight: 400;
    font-size: 12px;
    color: #999999;
    line-height: 20px;
  }
}
.workshopList {
  display: flex;
  .left {
    display: flex;
    flex-wrap: wrap;
    width: 95%;
    max-height: 24px;
    overflow-y: hidden;
    gap: 20px;
  }
  .right {
    flex: 1;
    cursor: pointer;
    span {
      font-weight: 400;
      font-size: 12px;
      color: #303133;
      line-height: 17px;
    }
    img {
      margin-left: 4px;
    }
  }
}
.emptyDiv {
  margin-top: 78px;
  margin: auto;
  width: 396px;
  .emptyImg {
    height: 257px;
  }
  .emptySpan {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 18px;
    color: rgba(0, 0, 0, 0.45);
    text-align: left;
    font-style: normal;
  }
}
.operation {
  display: flex;
  justify-content: center;
  width: 100%;
}

// .editWorkShopDialog {
//   .editWorkShopHeader {
//     width: 96px;
//     height: 24px;
//     .titleSpan {
//       font-weight: 600;
//       font-size: 16px;
//       color: rgba(0, 0, 0, 0.88);
//       line-height: 24px;
//     }
//   }

//   .editWorkShopDialogLeft {
//     height: 523px;
//     width: 50%;
//     border-right: 1px solid rgba(0, 0, 0, 0.06);
//   }

//   .editWorkShopDialogRight {
//     height: 523px;
//     width: 50%;
//     position: relative;
//     .dialogBottom {
//       position: absolute;
//       right: 0;
//       bottom: 0;
//       display: flex;
//       justify-content: flex-end;
//       margin-top: 12px;
//     }
//   }
// }

// :deep(.el-dialog) {
//   border-radius: 8px;
// }
// :deep(.el-dialog__body) {
//   height: 523px;
//   border-radius: 8px;
//   display: flex;
// }
</style>