商品管理

src/components/richTextEditor.vue

 <template>
-    <div style="border: 1px solid #ccc">
-      <Toolbar
-        style="border-bottom: 1px solid #ccc"
-        :editor="editorRef"
-        :defaultConfig="toolbarConfig"
-        :mode="mode"
-      />
-      <Editor
-        style="height: 500px; overflow-y: hidden;"
-        v-model="valueHtml"
-        :defaultConfig="editorConfig"
-        :mode="mode"
-        @onCreated="handleCreated"
-      />
-    </div>
+  <div style="border: 1px solid #ccc">
+    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
+    <Editor style="height: 400px; overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode"
+      @onCreated="handleCreated"  @onChange="handleChange"/>
+  </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import '@wangeditor/editor/dist/css/style.css' // 引入 css
 
 import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
 
-export default {
-  components: { Editor, Toolbar },
-  setup() {
-    // 编辑器实例，必须用 shallowRef
-    const editorRef = shallowRef()
+const props = defineProps({
+  valueHtml: {
+    type: String,
+    default: '<p></p>'
+  }
+})
 
-    // 内容 HTML
-    const valueHtml = ref('<p>hello</p>')
+const emits = defineEmits(['htmlChange'])
 
-    // 模拟 ajax 异步获取内容
-    onMounted(() => {
-        setTimeout(() => {
-            valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
-        }, 1500)
-    })
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef()
 
-    const toolbarConfig = {}
-    const editorConfig = { placeholder: '请输入内容...' }
+// 内容 HTML
+// const valueHtml = ref('<p></p>')
 
-    // 组件销毁时，也及时销毁编辑器
-    onBeforeUnmount(() => {
-        const editor = editorRef.value
-        if (editor == null) return
-        editor.destroy()
-    })
+// 模拟 ajax 异步获取内容
+// onMounted(() => {
+//   setTimeout(() => {
+//     valueHtml.value = '<p></p>'
+//   }, 1500)
+// })
 
-    const handleCreated = (editor) => {
-      editorRef.value = editor // 记录 editor 实例，重要！
-    }
+const toolbarConfig = {}
+const editorConfig = { placeholder: '请输入内容...' }
 
-    return {
-      editorRef,
-      valueHtml,
-      mode: 'default', // 或 'simple'
-      toolbarConfig,
-      editorConfig,
-      handleCreated
-    };
-  }
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value
+  if (editor == null) return
+  editor.destroy()
+})
+
+const handleCreated = (editor: any) => {
+  editorRef.value = editor // 记录 editor 实例，重要！
 }
+
+const handleChange = (editor: any) => {
+  emits('htmlChange', editor.children)
+}
+
 </script>    
\ No newline at end of file

src/views/commodityManage/list.vue

@@ -18,7 +18,7 @@
         <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row>
             <el-table-column type="expand">
                 <template #default="props">
-                    <el-form label-position="left" class="table-expand">
+                    <el-form label-position="left">
                         <el-form-item label="商品编号">
                             <span>{{ props.row.goodsSn }}</span>
                         </el-form-item>
@@ -64,7 +64,7 @@
 
             <el-table-column align="center" label="详情" prop="detail">
                 <template #default="scope">
-                    <el-dialog :visible.sync="detailDialogVisible" title="商品详情">
+                    <el-dialog v-model="detailDialogVisible" title="商品详情">
                         <div class="goods-detail-box" v-html="goodsDetail" />
                     </el-dialog>
                     <el-button type="primary" size="small" @click="showDetail(scope.row.detail)">查看</el-button>
@@ -118,15 +118,14 @@ import { ref } from "vue";
 import { ElMessageBox, ElNotification } from "element-plus";
 import { listGoods, deleteGoods } from "@/services/api/commodityManage/list";
 import { thumbnail, toPreview } from "@/utils/index";
-import { useRouter } from "vue-router";
+import router from '@/router';
 
-let router = useRouter();
 let list = ref([]);
 let total = ref(0);
 let listLoading = ref(true);
 let listQuery = ref({
     page: 1,
-    limit: 20,
+    limit: 10,
     goodsSn: undefined,
     name: undefined,
     sort: "add_time",
@@ -157,7 +156,9 @@ let handleFilter = () => {
     getList();
 };
 let handleCreate = () => {
-    // router.push({ path: "/goods/create" });
+    console.log('跳转');
+
+    router.push({ path: "/commodity/shelves" });
 };
 let handleUpdate = (row: any) => {
     // router.push({ path: "/goods/edit", query: { id: row.id } });