ahdevicemgt-ui/src/views/purchase/arrival/components/table-notice.vue

<template>
  <!-- 协议管理 新增、编辑 表单组件 -->
  <div>
    <div style="display: flex; margin-bottom: 20px">
      <span style="width: 100px; font-size: 16px">通知内容:</span>
      <el-input
        type="textarea"
        v-model="noticeIpt"
        rows="6"
      ></el-input>
    </div>
    <TableModel
      :columnsList="columnsListNotice"
      :send-params="transObj"
      :request-api="queryNoticePersonList"
      ref="tableRef"
      :show-sel="false"
      :show-btn-crews="false"
      :show-right-tools="false"
    >
      <template slot="handle" slot-scope="{ data }">
        <el-button
          type="danger"
          size="mini"
          @click="delPerson(data)"
        >删除</el-button
        >
<!--        <el-button
          type="primary"
          size="mini"
        >查看</el-button
        >
        <el-button
          type="danger"
          size="mini"
        >上传</el-button
        >-->
      </template>
    </TableModel>
    <div style="margin-top: 50px; display: flex; justify-content: right">
      <el-button
        type="primary"
        size="mini"
        @click="addPerson"
      >人员添加</el-button>
      <el-button
        type="primary"
        size="mini"
        @click="startReceive"
      >发起验收</el-button>
    </div>

    <DialogModel
      :dialogConfig="dialogConfigNoticeAdd"
      @closeDialogOuter="closeDialogOuterNoticeAdd"
    >
      <template slot="outerContent">
        <!-- 新增以及修改数据的表单组件 -->
        <TableNoticeAdd
        />
      </template>
    </DialogModel>

  </div>
</template>

<script>
import { columnsListNotice } from '../config-notice'
import {
  queryNoticePersonList,
  startReceiveApi
} from '@/api/purchase/arrival'
import TableNoticeAdd from './table-notice-add.vue'
export default {
  name: 'TableNotice',
  props: {
    editParams: {
      type: Object,
      default: () => null,
    },
  },
  components: { TableNoticeAdd },
  created() {
    console.log(this.editParams)
    this.transObj = { ['taskId']: this.editParams['id'] }
    this.noticeIpt = `各位同事您好，请于2023-11-22在2号库，进行机具验收。验收内容如下：机具类型：${this.editParams.purchaseMaterial}
    `
  },
  mounted() {

  },
  data() {
    return {
      columnsListNotice,
      noticeIpt: undefined,
      transObj: {},
      /** 弹框配置 */
      dialogConfigNoticeAdd: {
        outerWidth: '50%',
        outerTitle: '',
        outerVisible: false,
      },

    }
  },
  computed: {

  },
  methods: {
    queryNoticePersonList,
    closeDialogOuterNoticeAdd() {
      this.dialogConfigNoticeAdd.outerVisible = false
    },
    addPerson() {
      this.dialogConfigNoticeAdd.outerVisible = true
      this.dialogConfigNoticeAdd.outerTitle = '人员添加'
    },
    delPerson(data) {
      console.log(data)
      this.$modal
        .confirm('是否确认删除所选择的数据项？')
        .then(() => {
          this.$refs.tableRef.tableList.forEach((item, index) => {
            if(item.id === data.id) {
              this.$refs.tableRef.tableList.splice(index, 1)
            }
          })
        })
        .catch(() => {})
    },
    startReceive() {
      let phoneList = []
      let tableData = this.$refs.tableRef.tableList
      if(tableData.length === 0) {
        this.$modal.msgError('没有可通知的相关人员，请前往添加')
      } else {
        tableData.forEach(item => {
          phoneList.push(item.phone)
        })
        // 开始验收
        startReceiveApi({
          taskId: this.editParams.id,
          phoneArray: phoneList
        }).then(res => {
          this.$modal.msgSuccess('发送成功')
          this.closeDialogOuterNoticeAdd()
        }).catch(err => {})
      }
    }
  },
}
</script>

<style scoped>
::v-deep .el-select {
  width: 100%;
}
::v-deep .el-form-item__label{
  font-weight: normal;
}
</style>