huangxw 9 ay önce
ebeveyn
işleme
23aa73c226

+ 161 - 179
src/components/Editor/index.vue

@@ -1,30 +1,12 @@
 <template>
-  <div>
-    <el-upload
-      v-if="type === 'url'"
-      :action="upload.url"
-      :before-upload="handleBeforeUpload"
-      :on-success="handleUploadSuccess"
-      :on-error="handleUploadError"
-      class="editor-img-uploader"
-      name="file"
-      :show-file-list="false"
-      :headers="upload.headers"
-    >
-      <i ref="uploadRef"></i>
-    </el-upload>
-  </div>
-  <div class="editor">
-    <quill-editor
-      ref="quillEditorRef"
-      v-model:content="content"
-      content-type="html"
-      :options="options"
-      :style="styles"
-      @text-change="(e: any) => $emit('update:modelValue', content)"
-      :disabled="props.readOnly"
-    />
-  </div>
+    <div>
+        <el-upload v-if="type === 'url'" :action="upload.url" :before-upload="handleBeforeUpload" :on-success="handleUploadSuccess" :on-error="handleUploadError" class="editor-img-uploader" name="file" :show-file-list="false" :headers="upload.headers">
+            <i ref="uploadRef"></i>
+        </el-upload>
+    </div>
+    <div class="editor">
+        <quill-editor ref="quillEditorRef" v-model:content="content" content-type="html" :options="options" :style="styles" @text-change="(e: any) => $emit('update:modelValue', content)" :disabled="props.readOnly" />
+    </div>
 </template>
 
 <script setup lang="ts">
@@ -37,265 +19,265 @@ import { globalHeaders } from '@/utils/request';
 defineEmits(['update:modelValue']);
 
 const props = defineProps({
-  /* 编辑器的内容 */
-  modelValue: propTypes.string,
-  /* 高度 */
-  height: propTypes.number.def(400),
-  /* 最小高度 */
-  minHeight: propTypes.number.def(400),
-  /* 只读 */
-  readOnly: propTypes.bool.def(false),
-  /* 上传文件大小限制(MB) */
-  fileSize: propTypes.number.def(5),
-  /* 类型(base64格式、url格式) */
-  type: propTypes.string.def('url')
+    /* 编辑器的内容 */
+    modelValue: propTypes.string,
+    /* 高度 */
+    height: propTypes.number.def(400),
+    /* 最小高度 */
+    minHeight: propTypes.number.def(400),
+    /* 只读 */
+    readOnly: propTypes.bool.def(false),
+    /* 上传文件大小限制(MB) */
+    fileSize: propTypes.number.def(5),
+    /* 类型(base64格式、url格式) */
+    type: propTypes.string.def('url')
 });
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 const upload = reactive<UploadOption>({
-  headers: globalHeaders(),
-  url: import.meta.env.VITE_APP_BASE_API + '/resource/oss/upload'
+    headers: globalHeaders(),
+    url: import.meta.env.VITE_APP_BASE_API + '/resource/oss/upload'
 });
 const quillEditorRef = ref();
 const uploadRef = ref<HTMLDivElement>();
 
 const options = ref<any>({
-  theme: 'snow',
-  bounds: document.body,
-  debug: 'warn',
-  modules: {
-    // 工具栏配置
-    toolbar: {
-      container: [
-        ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
-        ['blockquote', 'code-block'], // 引用  代码块
-        [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
-        [{ indent: '-1' }, { indent: '+1' }], // 缩进
-        [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
-        [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
-        [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
-        [{ align: [] }], // 对齐方式
-        ['clean'], // 清除文本格式
-        ['link', 'image', 'video'] // 链接、图片、视频
-      ],
-      handlers: {
-        image: (value: boolean) => {
-          if (value) {
-            // 调用element图片上传
-            uploadRef.value.click();
-          } else {
-            Quill.format('image', true);
-          }
+    theme: 'snow',
+    bounds: document.body,
+    debug: 'warn',
+    modules: {
+        // 工具栏配置
+        toolbar: {
+            container: [
+                ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
+                ['blockquote', 'code-block'], // 引用  代码块
+                [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
+                [{ indent: '-1' }, { indent: '+1' }], // 缩进
+                [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
+                [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
+                [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
+                [{ align: [] }], // 对齐方式
+                ['clean'], // 清除文本格式
+                ['link', 'image', 'video'] // 链接、图片、视频
+            ],
+            handlers: {
+                image: (value: boolean) => {
+                    if (value) {
+                        // 调用element图片上传
+                        uploadRef.value.click();
+                    } else {
+                        Quill.format('image', true);
+                    }
+                }
+            }
         }
-      }
-    }
-  },
-  placeholder: '请输入内容',
-  readOnly: props.readOnly
+    },
+    placeholder: '请输入内容',
+    readOnly: props.readOnly
 });
 
 const styles = computed(() => {
-  let style: any = {};
-  if (props.minHeight) {
-    style.minHeight = `${props.minHeight}px`;
-  }
-  if (props.height) {
-    style.height = `${props.height}px`;
-  }
-  return style;
+    let style: any = {};
+    if (props.minHeight) {
+        style.minHeight = `${props.minHeight}px`;
+    }
+    if (props.height) {
+        style.height = `${props.height}px`;
+    }
+    return style;
 });
 
 const content = ref('');
 watch(
-  () => props.modelValue,
-  (v: string) => {
-    if (v !== content.value) {
-      content.value = v || '<p></p>';
-    }
-  },
-  { immediate: true }
+    () => props.modelValue,
+    (v: string) => {
+        if (v !== content.value) {
+            content.value = v || '<p></p>';
+        }
+    },
+    { immediate: true }
 );
 
 // 图片上传成功返回图片地址
 const handleUploadSuccess = (res: any) => {
-  // 如果上传成功
-  if (res.code === 200) {
-    // 获取富文本实例
-    let quill = toRaw(quillEditorRef.value).getQuill();
-    // 获取光标位置
-    let length = quill.selection.savedRange.index;
-    // 插入图片,res为服务器返回的图片链接地址
-    quill.insertEmbed(length, 'image', res.data.url);
-    // 调整光标到最后
-    quill.setSelection(length + 1);
-    proxy?.$modal.closeLoading();
-  } else {
-    proxy?.$modal.msgError('图片插入失败');
-    proxy?.$modal.closeLoading();
-  }
+    // 如果上传成功
+    if (res.code === 200) {
+        // 获取富文本实例
+        let quill = toRaw(quillEditorRef.value).getQuill();
+        // 获取光标位置
+        let length = quill.selection.savedRange.index;
+        // 插入图片,res为服务器返回的图片链接地址
+        quill.insertEmbed(length, 'image', res.data.url);
+        // 调整光标到最后
+        quill.setSelection(length + 1);
+        proxy?.$modal.closeLoading();
+    } else {
+        proxy?.$modal.msgError('图片插入失败');
+        proxy?.$modal.closeLoading();
+    }
 };
 
 // 图片上传前拦截
 const handleBeforeUpload = (file: any) => {
-  const type = ['image/jpeg', 'image/jpg', 'image/png', 'image/svg'];
-  const isJPG = type.includes(file.type);
-  //检验文件格式
-  if (!isJPG) {
-    proxy?.$modal.msgError(`图片格式错误!`);
-    return false;
-  }
-  // 校检文件大小
-  if (props.fileSize) {
-    const isLt = file.size / 1024 / 1024 < props.fileSize;
-    if (!isLt) {
-      proxy?.$modal.msgError(`上传文件大小不能超过 ${props.fileSize} MB!`);
-      return false;
+    const type = ['image/jpeg', 'image/jpg', 'image/png', 'image/svg'];
+    const isJPG = type.includes(file.type);
+    //检验文件格式
+    if (!isJPG) {
+        proxy?.$modal.msgError(`图片格式错误!`);
+        return false;
+    }
+    // 校检文件大小
+    if (props.fileSize) {
+        const isLt = file.size / 1024 / 1024 < props.fileSize;
+        if (!isLt) {
+            proxy?.$modal.msgError(`上传文件大小不能超过 ${props.fileSize} MB!`);
+            return false;
+        }
     }
-  }
-  proxy?.$modal.loading('正在上传文件,请稍候...');
-  return true;
+    proxy?.$modal.loading('正在上传文件,请稍候...');
+    return true;
 };
 
 // 图片失败拦截
 const handleUploadError = (err: any) => {
-  proxy?.$modal.msgError('上传文件失败');
+    proxy?.$modal.msgError('上传文件失败');
 };
 
 // 处理粘贴事件
 const handlePaste = (event: ClipboardEvent) => {
-  const clipboardData = event.clipboardData;
-  if (clipboardData) {
-    const items = Array.from(clipboardData.items);
-    for (let i = 0; i < items.length; i++) {
-      const item = items[i];
-      if (item.type.startsWith('image/')) {
-        event.preventDefault();
-        const file = item.getAsFile();
-        if (file) {
-          handleImageUpload(file);
+    const clipboardData = event.clipboardData;
+    if (clipboardData) {
+        const items = Array.from(clipboardData.items);
+        for (let i = 0; i < items.length; i++) {
+            const item = items[i];
+            if (item.type.startsWith('image/')) {
+                event.preventDefault();
+                const file = item.getAsFile();
+                if (file) {
+                    handleImageUpload(file);
+                }
+            }
         }
-      }
     }
-  }
 };
 
 const handleImageUpload = async (file: File) => {
-  const formData = new FormData();
-  formData.append('file', file);
+    const formData = new FormData();
+    formData.append('file', file);
 
-  try {
-    proxy?.$modal.loading('正在上传图片,请稍候...');
-    const response = await fetch(upload.url, {
-      method: 'POST',
-      headers: upload.headers,
-      body: formData
-    });
-    const res = await response.json();
-    if (res.code === 200) {
-      const quill = toRaw(quillEditorRef.value).getQuill();
-      const length = quill.selection.savedRange.index;
-      quill.insertEmbed(length, 'image', res.data.url);
-      quill.setSelection(length + 1);
-    } else {
-      proxy?.$modal.msgError('图片上传失败');
+    try {
+        proxy?.$modal.loading('正在上传图片,请稍候...');
+        const response = await fetch(upload.url, {
+            method: 'POST',
+            headers: upload.headers,
+            body: formData
+        });
+        const res = await response.json();
+        if (res.code === 200) {
+            const quill = toRaw(quillEditorRef.value).getQuill();
+            const length = quill.selection.savedRange.index;
+            quill.insertEmbed(length, 'image', res.data.url);
+            quill.setSelection(length + 1);
+        } else {
+            proxy?.$modal.msgError('图片上传失败');
+        }
+    } catch (error) {
+        proxy?.$modal.msgError('图片上传失败');
+    } finally {
+        proxy?.$modal.closeLoading();
     }
-  } catch (error) {
-    proxy?.$modal.msgError('图片上传失败');
-  } finally {
-    proxy?.$modal.closeLoading();
-  }
 };
 
 // 监听粘贴事件
 onMounted(() => {
-  const quill = toRaw(quillEditorRef.value).getQuill();
-  quill.root.addEventListener('paste', handlePaste);
+    const quill = toRaw(quillEditorRef.value).getQuill();
+    quill.root.addEventListener('paste', handlePaste);
 });
 
 onBeforeUnmount(() => {
-  const quill = toRaw(quillEditorRef.value).getQuill();
-  quill.root.removeEventListener('paste', handlePaste);
+    const quill = toRaw(quillEditorRef.value).getQuill();
+    quill.root.removeEventListener('paste', handlePaste);
 });
 </script>
 
 <style>
 .editor-img-uploader {
-  display: none;
+    display: none;
 }
 .editor,
 .ql-toolbar {
-  white-space: pre-wrap !important;
-  line-height: normal !important;
+    white-space: pre-wrap !important;
+    line-height: normal !important;
 }
 .quill-img {
-  display: none;
+    display: none;
 }
 .ql-snow .ql-tooltip[data-mode='link']::before {
-  content: '请输入链接地址:';
+    content: '请输入链接地址:';
 }
 .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
-  border-right: 0;
-  content: '保存';
-  padding-right: 0;
+    border-right: 0;
+    content: '保存';
+    padding-right: 0;
 }
 .ql-snow .ql-tooltip[data-mode='video']::before {
-  content: '请输入视频地址:';
+    content: '请输入视频地址:';
 }
 .ql-snow .ql-picker.ql-size .ql-picker-label::before,
 .ql-snow .ql-picker.ql-size .ql-picker-item::before {
-  content: '14px';
+    content: '14px';
 }
 .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='small']::before,
 .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before {
-  content: '10px';
+    content: '10px';
 }
 .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='large']::before,
 .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before {
-  content: '18px';
+    content: '18px';
 }
 .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='huge']::before,
 .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before {
-  content: '32px';
+    content: '32px';
 }
 .ql-snow .ql-picker.ql-header .ql-picker-label::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item::before {
-  content: '文本';
+    content: '文本';
 }
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before {
-  content: '标题1';
+    content: '标题1';
 }
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before {
-  content: '标题2';
+    content: '标题2';
 }
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before {
-  content: '标题3';
+    content: '标题3';
 }
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='4']::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before {
-  content: '标题4';
+    content: '标题4';
 }
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='5']::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before {
-  content: '标题5';
+    content: '标题5';
 }
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='6']::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before {
-  content: '标题6';
+    content: '标题6';
 }
 .ql-snow .ql-picker.ql-font .ql-picker-label::before,
 .ql-snow .ql-picker.ql-font .ql-picker-item::before {
-  content: '标准字体';
+    content: '标准字体';
 }
 .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='serif']::before,
 .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before {
-  content: '衬线字体';
+    content: '衬线字体';
 }
 .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='monospace']::before,
 .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before {
-  content: '等宽字体';
+    content: '等宽字体';
 }
 </style>

+ 18 - 24
src/views/dgtmedicine/news/medicinenews/add.vue

@@ -11,29 +11,28 @@
                 </el-button>
             </div>
             <div class="flex1 over-auto">
-                <el-form ref="formRef" label-width="auto" label-position="top" :model="form" :rules="rules"
-                    :disabled="disable">
-                    <div class="pd-16 border-bottom">
+                <el-form ref="formRef" label-width="auto" label-position="top" :model="form" :rules="rules" :disabled="disable">
+                    <div class="pd-16 border-bottom ov-hd">
                         <el-row :gutter="90">
                             <el-col :span="8">
-                                <el-form-item label="标题" prop="newsTitle">
-                                    <el-input v-model="form.newsTitle" clearable placeholder="请输入标题"></el-input>
+                                <el-form-item label="概况标题" prop="newsTitle">
+                                    <el-input v-model="form.newsTitle" clearable placeholder="请输入概况标题"></el-input>
                                 </el-form-item>
                             </el-col>
                             <el-col :span="8">
-                                <el-form-item label="品种" prop="variety">
-                                    <el-select v-model="form.variety" filterable multiple clearable placeholder="请选择品种">
-                                        <el-option v-for="item in varietyOptions" :key="item.value" :label="item.label"
-                                            :value="item.value"></el-option>
+                                <el-form-item label="关联品种" prop="variety">
+                                    <el-select v-model="form.variety" filterable multiple clearable placeholder="请选择关联品种">
+                                        <el-option v-for="item in varietyOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                     </el-select>
                                 </el-form-item>
                             </el-col>
-
                         </el-row>
                         <el-row>
-                            <el-col :span="24">
-                                <el-form-item label="内容" prop="newsContent">
-                                    <Editor v-model="form.newsContent" placeholder="请输入内容" :readOnly="disable"></Editor>
+                            <el-col :span="16">
+                                <el-form-item label="概况内容" prop="newsContent">
+                                    <div class="flex1">
+                                        <Editor v-model="form.newsContent" placeholder="请输入概况内容" :readOnly="disable"></Editor>
+                                    </div>
                                 </el-form-item>
                             </el-col>
                         </el-row>
@@ -43,7 +42,7 @@
             <div class="d-flex a-c j-c pd-16">
                 <el-button @click="router.go(-1)">取消</el-button>
                 <el-button @click="save" color="#0079fe" :disabled="disable">暂存</el-button>
-                <el-button @click="submitGround" type="warning" :disabled="disable">立即上架</el-button>
+                <el-button @click="submitGround" type="primary" :disabled="disable">立即上架</el-button>
             </div>
         </div>
     </div>
@@ -62,16 +61,11 @@ const form = ref({
     variety: [],
     newsContent: '',
     newsImg: '',
-    newsType: '0',
-
+    newsType: '0'
 });
 const rules = reactive({
-    newsTitle: [
-        { required: true, message: '请输入标题', trigger: 'blur' }
-    ],
-    content: [
-        { required: true, message: '请输入内容', trigger: 'blur' }
-    ]
+    newsTitle: [{ required: true, message: '请输入概况标题', trigger: 'blur' }],
+    content: [{ required: true, message: '请输入概况内容', trigger: 'blur' }]
 });
 const formRef = ref();
 const varietyOptions = ref([]);
@@ -79,7 +73,7 @@ const varietyOptions = ref([]);
 const fetchVarietyOptions = async () => {
     const res = await getMedicineList({});
     if (res && res.code === 200) {
-        varietyOptions.value = res.data.map(item => ({
+        varietyOptions.value = res.data.map((item) => ({
             label: item.varietyName,
             value: item.id
         }));
@@ -111,7 +105,7 @@ const fetchDetail = async (id) => {
 const disable = ref(false);
 onMounted(() => {
     const id = router.currentRoute.value.query.id;
-    disable.value = router.currentRoute.value.query.disable == '1'
+    disable.value = router.currentRoute.value.query.disable == '1';
     if (id) {
         // 编辑
         fetchDetail(id);

+ 1 - 1
src/views/dgtmedicine/news/medicinenews/index.vue

@@ -5,7 +5,7 @@
                 <div class="f-s-20 c-333 f-w-7 mb-10">品种概况</div>
                 <div class="d-flex">
                     <div class="mr-40">
-                        <el-button @click="router.push({ path: 'add' })" type="primary">新增</el-button>
+                        <el-button @click="router.push({ path: 'add' })" type="primary">新增概况</el-button>
                     </div>
                     <div class="flex1 ov-hd d-flex j-ed">
                         <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="auto">

+ 4 - 2
src/views/dgtmedicine/news/medicinenews/noticeAdd.vue

@@ -12,7 +12,7 @@
             </div>
             <div class="flex1 over-auto">
                 <el-form ref="formRef" label-width="auto" label-position="top" :model="form" :rules="rules" :disabled="disable">
-                    <div class="pd-16 border-bottom">
+                    <div class="pd-16 border-bottom ov-hd">
                         <el-row :gutter="90">
                             <el-col :span="8">
                                 <el-form-item label="公告标题:" prop="newsTitle">
@@ -47,7 +47,9 @@
                         <el-row>
                             <el-col :span="24">
                                 <el-form-item label="公告内容" prop="newsContent">
-                                    <Editor v-model="form.newsContent" placeholder="请输入内容" :readOnly="disable"></Editor>
+                                    <div class="flex1">
+                                        <Editor v-model="form.newsContent" placeholder="请输入内容" :readOnly="disable"></Editor>
+                                    </div>
                                 </el-form-item>
                             </el-col>
                         </el-row>

+ 5 - 0
src/views/dgtmedicine/news/medicinenews/noticeIndex.vue

@@ -22,6 +22,11 @@
                                     <el-option v-for="item in news_status" :key="item.value" :label="item.label" :value="item.value" />
                                 </el-select>
                             </el-form-item>
+                            <el-form-item label="公告类型" prop="newsType">
+                                <el-select style="width: 140px" v-model="queryParams.newsType" @change="handleQuery" clearable placeholder="请选择类型">
+                                    <el-option v-for="item in new_type" :key="item.value" :label="item.label" :value="item.value" />
+                                </el-select>
+                            </el-form-item>
                             <el-form-item>
                                 <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                                 <el-button icon="Refresh" @click="resetQuery">重置</el-button>

+ 3 - 10
src/views/index.vue

@@ -1,14 +1,7 @@
 <template>
-  <div class="app-container home">
-    
-  </div>
+    <div class="app-container home"></div>
 </template>
 
-<script setup name="Index" lang="ts">
+<script setup name="Index" lang="ts"></script>
 
-</script>
-
-<style scoped lang="scss">
-
-
-</style>
+<style scoped lang="scss"></style>