duty-management-web/src/views/system/daily-manage/detail.vue

<template>
  <CusDialog
      title="日志"
      :show="show"
      @close="$emit('update:show', false)"
      @submit="onSubmit"
      height="560px"
      :closeConfirm="!isViewCpt"
      :loading="loading"
      :showSubmit="!isViewCpt"
  >
    <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="日志日期:"
            link="date"
            :disabled="true"
            v-model:param="cusDetail.dutyTime"/>
        <CusFormColumn
            :span="24"
            required
            label="提交人员:"
            :disabled="true"
            v-model:param="cusDetail.submitter"/>
        <CusFormColumn
            :span="24"
            required
            label="日志记录:"
            type="textarea"
            :rows="4"
            show-word-limit
            :maxlength="100"
            v-model:param="cusDetail.dutyRecord"/>
        <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";
import {addDailyReportSave, editDailyReportEdit, getDailyReport, getDailyReportSearch} from "@/api/modules/daily";

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: <any>{},
      fileList: <any>[]
    })
    watch(() => props.show, (n) => {
      if (n) {
        state.loading = false
        state.fileList = []
        if (props.transfer.method !== 'add') {
          state.loading = true
          that.$api.getDailyReport(props.transfer.detail.id).then((res) => {
            if (res.code === 200 && res.data?.id) {
              setFormByInfo(res.data)
            } else {
              ElMessage.error(res.message)
              emit('update:show', false)
            }
            state.loading = false
          }).catch(() => {
            ElMessage.error('请求失败')
          })
        } else {
          state.loading = true
          that.$api.getDailyReportSearch().then((res) => {
            if (res.code === 200) {
              if (res.data?.id) {
                setFormByInfo(res.data)
              } else {
                // state.cusDetail = {
                //   dutyTime: that.$util.YMD(new Date(store.state.app.timestamp)),
                //   submitter: store.state.app.userInfo.displayName,
                // }
              }
              state.loading = false
            } else {
              ElMessage.error(res.message)
              emit('update:show', false)
            }
          }).catch(() => {
            ElMessage.error('请求失败')
          })
        }
        nextTick(() => {
          ref_form.value.reset()
        })
      }
    })
    const ref_form = ref()
    const isViewCpt = computed(() => {
      return props.transfer.method === 'view'
    })
    const setFormByInfo = (data) => {
      state.cusDetail = 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
          }
        })
      }
    }
    const onSubmit = () => {
      ref_form.value.submit().then(() => {
        ElMessageBox.confirm("是否提交?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          state.loading = true
          const params: any = 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 = params.id ? that.$api.editDailyReportEdit(params) : that.$api.addDailyReportSave(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>