shuhi-ui/src/views/data/books/components/books-edit.vue

<!-- 搜索表单 -->
<template>
  <simple-form-modal
    :title="title"
    :items="formItems"
    ref="editRef"
    :baseUrl="baseUrl"
    width="1080px"
    :formProps="{ grid: 8 }"
    :formatData="formatData"
    labelWidth="120px"
    @success="(data) => emit('success', data)"
    :body-style="{ overflow: 'auto' }"
  >
    <template #other>
      <div class="image-pos" id="image-pos">
        <image-upload
          :limit="1"
          v-model="formData.cover"
          :item-style="{ width: '260px', height: '320px', margin: 0 }"
          :button-style="{ width: '260px', height: '320px', margin: 0 }"
        />
      </div>
    </template>
  </simple-form-modal>
</template>

<script setup>
  import { reactive, ref, defineEmits, getCurrentInstance } from 'vue';
  import { useFormData } from '@/utils/use-form-data';
  import SimpleFormModal from '@/components/CommonPage/SimpleFormModal.vue';
  import ImageUpload from '@/components/ImageUpload/index.vue';
  const { proxy } = getCurrentInstance();

  //获取省市
  const provinceList = ref([]);
  const cityList = ref([]);
  const title = ref('新增图书');
  const emit = defineEmits(['success']);

  let colProps = { style: { marginRight: '15px' } };

  const formItems = reactive([
    { type: 'input', label: '书名', prop: 'bookName', required: true },
    { type: 'input', label: 'ISBN', prop: 'isbn', required: true, colProps },
    // { type: 'imageUpload', label: '封面', prop: 'cover', props: { limit: 1 } },
    { type: 'input', label: '作者', prop: 'author', required: true },
    { type: 'input', label: '定价', prop: 'price', required: true, colProps },
    { type: 'input', label: '出版社', prop: 'publish', required: true },
    {
      type: 'date',
      label: '出版时间',
      prop: 'pubDate',
      required: true,
      props: {
        format: 'YYYY-MM-DD',
        valueFormat: 'YYYY-MM-DD'
      },
      colProps
    },
    {
      type: 'dictSelect',
      label: '分类标签',
      prop: 'bookTag',
      props: { code: 'book_tag' }
    },
    { type: 'input', label: '中图法分类', prop: 'chineCateNo', colProps },
    { type: 'input', label: '丛书提名', prop: 'bookPut' },
    { type: 'input', label: '其他提名', prop: 'otherPut', colProps },
    { type: 'input', label: '主题', prop: 'bookTopic' },
    { type: 'input', label: '语种', prop: 'lang', colProps },
    { type: 'input', label: '开本尺寸', prop: 'bookFormat' },
    { type: 'input', label: '装帧', prop: 'bookPack', colProps },
    { type: 'input', label: '翻译人', prop: 'translator' },
    {
      type: 'dictSelect',
      label: '是否套装',
      prop: 'suit',
      props: { code: 'is_common_yes' }
    },
    { type: 'input', label: '中图法分类名称', prop: 'chineCateName' },
    { type: 'input', label: '总页数', prop: 'pageTotal' },
    {
      type: 'dictSelect',
      label: '人工核实',
      prop: 'perCheck',
      props: { code: 'is_common_yes' }
    },
    { type: 'input', label: '字数', prop: 'worldCount' },
    { type: 'input', label: '出版地', prop: 'putAddress' },
    { type: 'input', label: '读者对象', prop: 'readers' },
    { type: 'input', label: '版本', prop: 'bookVersion' },
    { type: 'input', label: '印刷厂', prop: 'printHouse' },
    {
      type: 'date',
      label: '印刷时间',
      prop: 'printTime',
      props: {
        format: 'YYYY-MM-DD',
        valueFormat: 'YYYY-MM-DD'
      }
    },
    { type: 'input', label: '印刷数量', prop: 'printNum' },
    {
      type: 'textarea',
      label: '图书短评',
      prop: 'shortReview',
      colProps: { span: 24 }
    },
    {
      type: 'editor',
      label: '书嗨推荐',
      prop: 'shuhiRecommend',
      colProps: { span: 24 }
    },
    {
      type: 'editor',
      label: '书嗨摘要',
      prop: 'shuhiBlurb',
      colProps: { span: 24 }
    },
    {
      type: 'editor',
      label: '内容简介',
      prop: 'contentBlurb',
      colProps: { span: 24 }
    },
    {
      type: 'editor',
      label: '作者简介',
      prop: 'anthorBlurb',
      colProps: { span: 24 }
    },
    {
      type: 'editor',
      label: '图书目录',
      prop: 'catalog',
      colProps: { span: 24 }
    }
  ]);
  //默认值
  const baseUrl = reactive({
    add: '/book/bookInfo/save',
    update: '/book/bookInfo/update',
    detail: '/book/bookInfo/getDetail'
  });
  const formData = ref({ perCheck: '1', suit: '0', bookTag: '1' });
  const editRef = ref(null);

  function handleOpen(data = {}) {
    title.value = data && data.id ? '编辑图书' : '新增图书';
    formData.value = Object.assign(formData.value, data || {});
    editRef.value?.handleOpen(formData.value);
  }

  //格式化数据
  function formatData(data) {
    let values = JSON.parse(JSON.stringify(data));
    let bookBlurb = {
      bookId: data.id,
      isbn: data.isbn,
      shuhiRecommend: data.shuhiRecommend,
      shuhiBlurb: data.shuhiBlurb,
      contentBlurb: data.contentBlurb,
      anthorBlurb: data.anthorBlurb,
      catalog: data.catalog
    };
    values.bookBlurb = bookBlurb;
    return values;
  }

  //回填数据
  function fallbackData(data) {
    let values = JSON.parse(JSON.stringify(data));
    if (data.bookBlurb) {
      values.shuhiRecommend = data.bookBlurb.shuhiRecommend;
      values.shuhiBlurb = data.bookBlurb.shuhiBlurb;
      values.contentBlurb = data.bookBlurb.contentBlurb;
      values.anthorBlurb = data.bookBlurb.anthorBlurb;
      values.catalog = data.bookBlurb.catalog;
    }

    return values;
  }

  defineExpose({ handleOpen });
</script>
<style lang="scss">
  .image-pos {
    position: absolute;
    right: 40px;
    top: 16px;
    z-index:10
  }
</style>