big-model-web/src/views/manage/knowledge/documents/document/rename.vue

<template>
  <CzrDialog
    :show="show"
    title="重命名"
    @onClose="$emit('update:show', false)"
    @onSubmit="onSubmit"
    width="33rem"
    :loading="state.loading"
  >
    <div class="bm-form">
      <CzrForm ref="ref_form" layout="y">
        <CzrFormColumn
          required
          :span="24"
          label="文件名称"
          v-model:param="state.name"
        />
      </CzrForm>
    </div>
  </CzrDialog>
</template>

<script setup lang="ts">
import {
  computed,
  getCurrentInstance,
  nextTick,
  reactive,
  ref,
  watch,
} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useDialogStore, useDictionaryStore } from '@/stores'
import { useRouter } from 'vue-router'
import { documentUpdateFileName } from '@/api/modules/knowledge/document'

const router = useRouter()
const DictionaryStore = useDictionaryStore()
const DialogStore = useDialogStore()
const emit = defineEmits(['update:show', 'refresh'])
const { proxy } = getCurrentInstance()
const props = defineProps({
  show: { default: false },
  transfer: <any>{},
})
const state: any = reactive({
  loading: false,
  name: '',
})
const ref_form = ref()
watch(
  () => props.show,
  (n) => {
    if (n) {
      state.name = props.transfer.name
      nextTick(() => {
        ref_form.value.reset()
      })
    }
  },
)
const onSubmit = () => {
  ref_form.value
    .submit()
    .then(() => {
      DialogStore.confirm({
        content: `请确认是否重命名文件？`,
        onSubmit: () => {
          state.loading = true
          documentUpdateFileName({
            docId: props.transfer.id,
            name: state.name,
          })
            .then(() => {
              ElMessage.success(`重命名成功！`)
              emit('update:show', false)
              emit('refresh')
            })
            .catch(() => {})
            .finally(() => {
              state.loading = false
            })
        },
      })
    })
    .catch((e) => {
      ElMessage({
        message: e[0].message,
        grouping: true,
        type: 'warning',
      })
    })
}
</script>

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