duty-management-web/src/views/system/notice-announcement/detail.vue

<template>
  <CusDialog
      title="通知公告"
      :show="show"
      @close="$emit('update:show', false)"
      @submit="onSubmit"
      height="500px"
      :closeConfirm="!isViewCpt"
      :loading="loading"
      :showSubmit="!isViewCpt"
      :submitText="transfer.method === 'add' ? '确认发布' : '确认'"
  >
    <div class="__normal-form">
      <CusForm labelWidth="100px" ref="ref_form" :formView="isViewCpt">
        <CusFormColumn
            :span="24"
            required
            label="标题:"
            v-model:param="cusDetail.title"/>
        <CusFormColumn
            :span="24"
            required
            label="内容:"
            type="textarea"
            :rows="8"
            v-model:param="cusDetail.noticeBody"/>
        <CusFormColumn
            :span="24"
            required
            label="类型:"
            link="select"
            v-model:param="cusDetail.type"
            :options="$store.state.dictionary.noticeTypeList"/>
        <CusFormColumn
            :span="24"
            label="上传附件:"
            link="upload"
            v-model:param="fileList"
            :delRule="(file) => true"/>
      </CusForm>
    </div>
  </CusDialog>
</template>

<script lang="ts">
import {
  defineComponent,
  computed,
  onMounted,
  ref,
  reactive,
  watch,
  getCurrentInstance,
  ComponentInternalInstance,
  toRefs,
  nextTick
} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'
import {ElMessage, ElMessageBox} from "element-plus";

export default defineComponent({
  name: '',
  components: {},
  props: {
    show: {},
    transfer: <any>{}
  },
  setup(props, {emit}) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
    const state = reactive({
      loading: false,
      cusDetail: {},
      fileList: []
    })
    watch(() => props.show, (n) => {
      if (n) {
        state.loading = false
        state.fileList = []
        state.cusDetail = {
          deptId: store.state.app.userInfo.dept.id,
          deptName: store.state.app.userInfo.dept.organizationName,
          status: '1',
          publisher: store.state.app.userInfo.displayName,
          publishTime: that.$util.YMDHms(new Date(store.state.app.timestamp)),
        }
        if (props.transfer.method !== 'add') {
          state.loading = true
          that.$api.getNoticeSearch({id: props.transfer.detail.id}).then((res) => {
            if (res.code === 200) {
              state.cusDetail = res.data
              if (state.cusDetail.fileUrl) {
                const urlArr = state.cusDetail.fileUrl.split(',')
                const nameArr = state.cusDetail.fileName.split(',')
                state.fileList = urlArr.map((v, i) => {
                  return {
                    name: nameArr?.[i] || v,
                    url: v
                  }
                })
              }
              emit('onView')
            } else {
              ElMessage.error(res.message)
              emit('update:show', false)
            }
            state.loading = false
          }).catch(() => {
            ElMessage.error('请求失败')
          })
        }
        nextTick(() => {
          ref_form.value.reset()
        })
      }
    })
    const ref_form = ref()
    const isViewCpt = computed(() => {
      return props.transfer.method === 'view'
    })
    const onSubmit = () => {
      ref_form.value.submit().then(() => {
        ElMessageBox.confirm("是否提交?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          state.loading = true
          const params = state.cusDetail
          if (state.fileList?.length > 0) {
            params.fileName = state.fileList.map(v => v.name).join(',')
            params.fileUrl = state.fileList.map(v => v.url).join(',')
          } else {
            params.fileName = ''
            params.fileUrl = ''
          }
          const apiHandle = props.transfer.method === 'edit' ? that.$api.editNoticeEdit(params) : that.$api.addNoticeSave(params)
          apiHandle.then(res => {
            if (res.code === 200) {
              ElMessage.success(res.message)
              emit('update:show', false)
              emit('refresh')
            } else {
              ElMessage.error(res.message)
            }
            state.loading = false
          }).catch(() => {
            state.loading = false
          })
        }).catch(() => {})
      }).catch((e) => {
        ElMessage({
          message: e[0].message,
          grouping: true,
          type: 'warning',
        })
      })
    }
    return {
      ...toRefs(state),
      onSubmit,
      isViewCpt,
      ref_form
    }
  },
})
</script>

<style scoped lang="scss">
</style>