Project Init

src/components/editor/index.vue

@@ -2,226 +2,231 @@
   <div v-if="state.mounted" :style="style" class="ba-editor wangeditor" v-loading="state.loading">
     <Toolbar class="wangeditor-toolbar" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
     <Editor ref="editor" :style="state.editorStyle" v-model="state.value" :defaultConfig="state.editorConfig"
-      :mode="mode" @onCreated="handleCreated" @onChange="handleChange" v-bind="$attrs"/>
+            :mode="mode" @onCreated="handleCreated" @onChange="handleChange" v-bind="$attrs" />
   </div>
 </template>
 
 <script setup lang="ts">
-import '@wangeditor/editor/dist/css/style.css' // 引入 css
-import { onBeforeUnmount, reactive, shallowRef, onMounted, CSSProperties, watch, nextTick, ref } from 'vue'
-import { IEditorConfig, IToolbarConfig, i18nChangeLanguage, IDomEditor } from '@wangeditor/editor'
-import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
-import { useConfig } from '/@/stores/config'
-import { fileUpload } from '/@/api/common'
-import NProgress from 'nprogress'
-import { stat } from 'fs'
+import "@wangeditor/editor/dist/css/style.css"; // 引入 css
+import { onBeforeUnmount, reactive, shallowRef, onMounted, CSSProperties, watch, nextTick, ref } from "vue";
+import { IEditorConfig, IToolbarConfig, i18nChangeLanguage, IDomEditor } from "@wangeditor/editor";
+import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { useConfig } from "/@/stores/config";
+import { fileUpload } from "/@/api/common";
+import NProgress from "nprogress";
+import { stat } from "fs";
 
 interface Props {
-    // 编辑区高度
-    height?: string
-    mode?: 'default' | 'simple'
-    placeholder?: string
-    modelValue: string
-    // https://www.wangeditor.com/v5/toolbar-config.html#getconfig
-    toolbarConfig?: Partial<IToolbarConfig>
-    // https://www.wangeditor.com/v5/editor-config.html#placeholder
-    editorConfig?: Partial<IEditorConfig>
-    // 编辑区style
-    editorStyle?: CSSProperties
-    // 整体的style
-    style?: CSSProperties
-    disable?: boolean
+  // 编辑区高度
+  height?: string;
+  mode?: "default" | "simple";
+  placeholder?: string;
+  modelValue: string;
+  // https://www.wangeditor.com/v5/toolbar-config.html#getconfig
+  toolbarConfig?: Partial<IToolbarConfig>;
+  // https://www.wangeditor.com/v5/editor-config.html#placeholder
+  editorConfig?: Partial<IEditorConfig>;
+  // 编辑区style
+  editorStyle?: CSSProperties;
+  // 整体的style
+  style?: CSSProperties;
+  disable?: boolean;
 }
 
 type VideoInsertFnType = (url: string, poster: string) => void
 type ImgInsertFnType = (url: string, alt: string, href: string) => void
 
 const props = withDefaults(defineProps<Props>(), {
-    height: '320px',
-    mode: 'default',
-    placeholder: '请输入内容...',
-    modelValue: '',
-    disable: false,
-    toolbarConfig: () => {
-        return {}
-    },
-    editorConfig: () => {
-        return {}
-    },
-    editorStyle: () => {
-        {
-            return {}
-        }
-    },
-    style: () => {
-        return {}
-    },
-})
-
-const config = useConfig()
-const editorRef = shallowRef()
+  height: "320px",
+  mode: "default",
+  placeholder: "请输入内容...",
+  modelValue: "",
+  disable: false,
+  toolbarConfig: () => {
+    return {};
+  },
+  editorConfig: () => {
+    return {};
+  },
+  editorStyle: () => {
+    {
+      return {};
+    }
+  },
+  style: () => {
+    return {};
+  }
+});
+
+const config = useConfig();
+const editorRef = shallowRef();
 const emits = defineEmits<{
-    (e: 'update:modelValue', value: string): void
-}>()
+  (e: "update:modelValue", value: string): void
+}>();
 
 const state: {
-    mounted: boolean
-    value: string
-    editorConfig: Partial<IEditorConfig>
-    editorStyle: CSSProperties
-    loading: boolean
+  mounted: boolean
+  value: string
+  editorConfig: Partial<IEditorConfig>
+  editorStyle: CSSProperties
+  loading: boolean
 } = reactive({
-    mounted: false,
-    value: props.modelValue,
-    editorConfig: props.editorConfig,
-    editorStyle: props.editorStyle,
-    loading: false,
-})
+  mounted: false,
+  value: props.modelValue,
+  editorConfig: props.editorConfig,
+  editorStyle: props.editorStyle,
+  loading: false
+});
 
 onMounted(() => {
-    i18nChangeLanguage(config.lang.defaultLang == 'zh-cn' ? 'zh-CN' : config.lang.defaultLang)
-    state.editorConfig.placeholder = props.placeholder
-
-    // 图片上传配置
-    state.editorConfig.MENU_CONF = {}
-    state.editorConfig.MENU_CONF['uploadImage'] = {
-        fieldName: 'file',
-        maxFileSize: 10 * 1024 * 1024, // 10M
-        onProgress(progress: number) {
-            NProgress.inc()
-        },
-        async customUpload(file: File, insertFn: ImgInsertFnType) {
-            NProgress.configure({ showSpinner: true })
-            NProgress.start()
-            let fd = new FormData()
-            fd.append('file', file)
-            state.loading = true
-            fileUpload(fd)
-                .then((res) => {
-                    if (res.code == 1) {
-                        insertFn(res.data.previewUrl, res.data.originalFilename, res.data.previewUrl)
-
-                    }
-                    NProgress.done()
-                    state.loading = false
-                })
-                .catch((err) => {
-                    NProgress.done()
-                    state.loading = false
-                })
-        },
+  i18nChangeLanguage(config.lang.defaultLang == "zh-cn" ? "zh-CN" : config.lang.defaultLang);
+  state.editorConfig.placeholder = props.placeholder;
+
+  // 图片上传配置
+  state.editorConfig.MENU_CONF = {};
+  state.editorConfig.MENU_CONF["uploadImage"] = {
+    fieldName: "file",
+    maxFileSize: 10 * 1024 * 1024, // 10M
+    onProgress(progress: number) {
+      NProgress.inc();
+    },
+    async customUpload(file: File, insertFn: ImgInsertFnType) {
+      NProgress.configure({ showSpinner: true });
+      NProgress.start();
+      let fd = new FormData();
+      fd.append("file", file);
+      state.loading = true;
+      fileUpload(fd)
+        .then((res) => {
+          if (res.code == 1) {
+            insertFn(res.data.previewUrl, res.data.originalFilename, res.data.previewUrl);
+
+          }
+          NProgress.done();
+          state.loading = false;
+        })
+        .catch((err) => {
+          NProgress.done();
+          state.loading = false;
+        });
     }
+  };
 
-    // 视频上传配置
-    state.editorConfig.MENU_CONF['uploadVideo'] = {
-        fieldName: 'file',
-        onProgress(progress: number) {
-            NProgress.inc()
-        },
-        async customUpload(file: File, insertFn: VideoInsertFnType) {
-            NProgress.configure({ showSpinner: true })
-            NProgress.start()
-            let fd = new FormData()
-            fd.append('file', file)
-            state.loading = true
-            fileUpload(fd)
-                .then((res) => {
-                    console.log('上传视频', res.data)
-                    if (res.code == 1) {
-                        let poster = 'http://admin.baoxiaojia.dingsenhulian.com/uploadFile/1596051044679421952.jpg'
-                        insertFn(res.data.previewUrl, poster)
-                    }
-                    NProgress.done()
-                    state.loading = false
-                })
-                .catch((err) => {
-                    NProgress.done()
-                    state.loading = false
-                })
-        },
+  // 视频上传配置
+  state.editorConfig.MENU_CONF["uploadVideo"] = {
+    fieldName: "file",
+    onProgress(progress: number) {
+      NProgress.inc();
+    },
+    async customUpload(file: File, insertFn: VideoInsertFnType) {
+      NProgress.configure({ showSpinner: true });
+      NProgress.start();
+      let fd = new FormData();
+      fd.append("file", file);
+      state.loading = true;
+      fileUpload(fd)
+        .then((res) => {
+          console.log("上传视频", res.data);
+          if (res.code == 1) {
+            let poster = "http://admin.baoxiaojia.dingsenhulian.com/uploadFile/1596051044679421952.jpg";
+            insertFn(res.data.previewUrl, poster);
+          }
+          NProgress.done();
+          state.loading = false;
+        })
+        .catch((err) => {
+          NProgress.done();
+          state.loading = false;
+        });
     }
+  };
 
-    state.editorStyle.height = props.height
-    state.editorStyle['overflow-y'] = 'hidden'
-    state.mounted = true
+  state.editorStyle.height = props.height;
+  state.editorStyle["overflow-y"] = "hidden";
+  state.mounted = true;
 
-    //设置只读
-    nextTick(() => {
-        if (props.disable) {
-            editorRef.value.disable()
-        }
-    })
-})
+  //设置只读
+  nextTick(() => {
+    if (props.disable) {
+      editorRef.value.disable();
+    }
+  });
+});
 
-const editor = ref()
+const editor = ref();
 
 // 自定义粘贴事件
 const handlePaste = (
-      editor: IDomEditor,
-      event: ClipboardEvent,
-      callback: (val: boolean) => void
-    ) => {
-     // editor.insertText('test')
-      callback(false)
-    }
+  editor: IDomEditor,
+  event: ClipboardEvent,
+  callback: (val: boolean) => void
+) => {
+  // editor.insertText('test')
+  callback(false);
+};
 
 // 组件销毁时，也及时销毁编辑器
 onBeforeUnmount(() => {
-    if (editorRef.value == null) return
-    editorRef.value.destroy()
-})
+  if (editorRef.value == null) return;
+  editorRef.value.destroy();
+});
 
 const handleCreated = (editor: any) => {
-    editorRef.value = editor // 记录 editor 实例
-}
+  editorRef.value = editor; // 记录 editor 实例
+};
 
 const handleChange = () => {
-    emits('update:modelValue', editorRef.value.getHtml())
-}
+  emits("update:modelValue", editorRef.value.getHtml());
+};
 
 const getRef = () => {
-    return editorRef.value
-}
+  return editorRef.value;
+};
 
 defineExpose({
-    getRef,
-})
+  getRef
+});
 
 watch(
-    () => props.modelValue,
-    (newVal) => {
-        state.value = newVal
-    }
-)
+  () => props.modelValue,
+  (newVal) => {
+    state.value = newVal;
+  }
+);
 </script>
 
-<style  lang="scss">
+<style lang="scss">
 .ba-editor {
-    border: 1px solid var(--color-sub-3);
-    z-index: 9999;
-    :deep(.w-e-scroll) {
-        scrollbar-width: none;
-        &::-webkit-scrollbar {
-            width: 5px;
-        }
-        &::-webkit-scrollbar-thumb {
-            background: #eaeaea;
-            border-radius: var(--el-border-radius-base);
-            box-shadow: none;
-            -webkit-box-shadow: none;
-        }
-        &:hover {
-            &::-webkit-scrollbar-thumb:hover {
-                background: #c8c9cc;
-            }
-        }
+  border: 1px solid var(--color-sub-3);
+  z-index: 9999;
+
+  :deep(.w-e-scroll) {
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      width: 5px;
     }
+
+    &::-webkit-scrollbar-thumb {
+      background: #eaeaea;
+      border-radius: var(--el-border-radius-base);
+      box-shadow: none;
+      -webkit-box-shadow: none;
+    }
+
+    &:hover {
+      &::-webkit-scrollbar-thumb:hover {
+        background: #c8c9cc;
+      }
+    }
+  }
 }
+
 .wangeditor-toolbar {
-    border-bottom: 1px solid var(--color-sub-3);
+  border-bottom: 1px solid var(--color-sub-3);
 }
 
 video {
-    width: 100%;
+  width: 100%;
 }
 </style>

src/components/pictureUpload/index.vue

@@ -1,5 +1,4 @@
 <template>
-  <!-- <img v-if="previewUrl?.length>0&&previewUrl!='[]'" :src="previewUrl" class="box" style="cursor: pointer" @click="clickImg"/> -->
   <el-image :preview-teleported="true" :preview-src-list="[previewUrl]" v-if="previewUrl?.length>0&&previewUrl!='[]'"
             :src="previewUrl" class="box" />
   <el-upload class="box" action="#" :show-file-list="false" :http-request="upload" :accept="accept">
@@ -89,9 +88,7 @@ function upload(file: any) {
 let watchImg = ref(false);
 let showUrl = ref("");
 
-function clickImg() {
-  watchImg.value = true;
-}
+
 </script>
 
 <style scoped>

src/views/backend/enterprise/project/parking/editDialog.vue

@@ -2,96 +2,106 @@
   <el-dialog title="车位登记" v-model="showDialog" width="800px" @close="closeDialog">
     <el-form ref="formRef" :model="formData" label-position="right" :label-width="'100px'" :rules="formRules"
              label-width="100px">
-      <el-row>
-        <el-col :span="12">
-          <el-form-item label="车位编号" prop="parkingNumber">
-            <el-input v-model="formData.parkingNumber"></el-input>
+      <el-tabs tab-position="left" v-model="activeTab">
+        <el-tab-pane name="first" label="车位信息">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="车位编号" prop="parkingNumber">
+                <el-input v-model="formData.parkingNumber"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="车位类型" prop="parkingType">
+                <el-radio-group v-model="formData.parkingType">
+                  <el-radio :label="0">车位</el-radio>
+                  <el-radio :label="1">车库</el-radio>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="车位面积" prop="area">
+                <el-input v-model="formData.area"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="联系电话" prop="contactNumber">
+                <el-input v-model="formData.contactNumber"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item prop="parkingUrl" label="车位照片">
+                <pictureUpload v-model="formData.parkingUrl"></pictureUpload>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="是否特价" prop="isSpecial">
+                <el-radio-group v-model="formData.isSpecial">
+                  <el-radio :label="0">否</el-radio>
+                  <el-radio :label="1">是</el-radio>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="是否置顶" prop="isTop">
+                <el-radio-group v-model="formData.isTop">
+                  <el-radio :label="0">否</el-radio>
+                  <el-radio :label="1">是</el-radio>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+            <el-divider />
+            <el-col :span="24">
+              <el-form-item label="是否出售" prop="isSale">
+                <el-radio-group v-model="formData.isSale">
+                  <el-radio-button :label="0" border>否</el-radio-button>
+                  <el-radio-button :label="1" border>是</el-radio-button>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="售价" prop="salePrice" v-if="formData.isSale == 1">
+                <el-input v-model="formData.salePrice"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="出售状态" prop="saleStatus" v-if="formData.isSale == 1">
+                <el-select v-model="formData.saleStatus">
+                  <el-option :value="0" label="否"></el-option>
+                  <el-option :value="1" label="是"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-divider />
+            <el-col :span="24">
+              <el-form-item label="是否出租" prop="isHire">
+                <el-radio-group v-model="formData.isHire">
+                  <el-radio-button :label="0" border>否</el-radio-button>
+                  <el-radio-button :label="1" border>是</el-radio-button>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="租金" prop="hirePrice" v-if="formData.isHire == 1">
+                <el-input v-model="formData.hirePrice"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="出租状态" prop="hireStatus" v-if="formData.isHire == 1">
+                <el-select v-model="formData.hireStatus">
+                  <el-option :value="0" label="否"></el-option>
+                  <el-option :value="1" label="是"></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-tab-pane>
+        <el-tab-pane name="second" label="车位简介">
+          <el-form-item label="" prop="parkingShow" label-width="0">
+            <editor v-model="formData.parkingShow"></editor>
           </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="车位类型" prop="parkingType">
-            <el-radio-group v-model="formData.parkingType">
-              <el-radio :label="0">车位</el-radio>
-              <el-radio :label="1">车库</el-radio>
-            </el-radio-group>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="车位面积" prop="area">
-            <el-input v-model="formData.area"></el-input>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="联系电话" prop="contactNumber">
-            <el-input v-model="formData.contactNumber"></el-input>
-          </el-form-item>
-        </el-col>
-        <el-col :span="24">
-          <el-form-item prop="parkingUrl" label="车位照片">
-            <pictureUpload v-model="formData.parkingUrl"></pictureUpload>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="是否特价" prop="isSpecial">
-            <el-radio-group v-model="formData.isSpecial">
-              <el-radio :label="0">否</el-radio>
-              <el-radio :label="1">是</el-radio>
-            </el-radio-group>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="是否置顶" prop="isTop">
-            <el-radio-group v-model="formData.isTop">
-              <el-radio :label="0">否</el-radio>
-              <el-radio :label="1">是</el-radio>
-            </el-radio-group>
-          </el-form-item>
-        </el-col>
-        <el-divider />
-        <el-col :span="24">
-          <el-form-item label="是否出售" prop="isSale">
-            <el-radio-group v-model="formData.isSale">
-              <el-radio-button :label="0" border>否</el-radio-button>
-              <el-radio-button :label="1" border>是</el-radio-button>
-            </el-radio-group>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="售价" prop="salePrice" v-if="formData.isSale == 1">
-            <el-input v-model="formData.salePrice"></el-input>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="出售状态" prop="saleStatus" v-if="formData.isSale == 1">
-            <el-select v-model="formData.saleStatus">
-              <el-option :value="0" label="否"></el-option>
-              <el-option :value="1" label="是"></el-option>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-divider />
-        <el-col :span="24">
-          <el-form-item label="是否出租" prop="isHire">
-            <el-radio-group v-model="formData.isHire">
-              <el-radio-button :label="0" border>否</el-radio-button>
-              <el-radio-button :label="1" border>是</el-radio-button>
-            </el-radio-group>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="租金" prop="hirePrice" v-if="formData.isHire == 1">
-            <el-input v-model="formData.hirePrice"></el-input>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="出租状态" prop="hireStatus" v-if="formData.isHire == 1">
-            <el-select v-model="formData.hireStatus">
-              <el-option :value="0" label="否"></el-option>
-              <el-option :value="1" label="是"></el-option>
-            </el-select>
-          </el-form-item>
-        </el-col>
-      </el-row>
+        </el-tab-pane>
+      </el-tabs>
+
     </el-form>
 
     <template #footer>
@@ -111,12 +121,14 @@ import request from "/@/api/request";
 import { district_list, parking } from "/@/api/controllerUrls";
 import { ElMessage } from "element-plus";
 import pictureUpload from "/@/components/pictureUpload/index.vue";
+import editor from "/@/components/editor/index.vue";
 
 let showDialog = ref(false);
 
 let formRef = ref();
 
 let type = ref("add");
+let activeTab = ref("first");
 
 let emit = defineEmits(["close"]);
 
@@ -154,8 +166,8 @@ let formData = reactive({
   isSale: 0,//是否出售
   salePrice: 0,//售价
   saleStatus: 0,//出售状态
-  contactNumber: ""//联系电话
-
+  contactNumber: "",//联系电话
+  parkingShow: "<p><br></p>"//车位简介
 });
 
 let formRules = {
@@ -182,6 +194,7 @@ function getInitData(event) {
     id: event
   }, "detail").then((res) => {
     if (res.code == 1) {
+      formRef.value?.resetFields();
       for (let key in formData) {
         formData[key] = res.data[key];
       }