style(transportCapacity): 调整车辆调度弹窗部门级联选择器宽度

- 注释掉多个页面及组件中el-form-item的margin-bottom样式 - 增加车辆调度弹窗配置dialogCustomClass: 'vehicle-dispatch-dialog' - 在全局样式element-ui.scss中为.vehicle-dispatch-dialog内el-cascader设置宽度100% - 解决avue-crud弹窗append-to-body导致页面容器scoped样式无法命中问题 - 更新vite配置，将开发服务器端口修改为2889，代理目标指向远程地址 - 补充工程文档说明和样式调整原因分析
2026-10-13 20:21:17 +08:00
parent 6296c8f6f4
commit 68f4b2c35e
8 changed files with 130 additions and 17 deletions
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <title>cascader width check</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import { createApp, h, ref, resolveComponent } from 'vue';
+      import ElementPlus from 'element-plus';
+      import 'element-plus/dist/index.css';
+      import Avue from '@smallwei/avue';
+      import '@smallwei/avue/lib/index.css';
+      import './src/styles/element-ui.scss';
+
+      const option = {
+        dialogCustomClass: 'vehicle-dispatch-dialog',
+        labelPosition: 'right',
+        labelWidth: 'auto',
+        addBtn: false,
+        editBtn: false,
+        delBtn: false,
+        viewBtn: false,
+        selection: false,
+        column: [
+          { label: '车牌号', prop: 'plateNo', formslot: true, span: 12 },
+          { label: '使用部门', prop: 'useDepartment', formslot: true, span: 12 },
+        ],
+      };
+
+      const tree = [
+        { id: 1, title: '桂物物流集团', children: [{ id: 2, title: '广西桂物物流服务集团有限公司' }] },
+      ];
+
+      const Demo = {
+        data() {
+          return { option, form: {}, data: [], page: { currentPage: 1, pageSize: 10, total: 0 } };
+        },
+        mounted() {
+          this.$nextTick(() => this.$refs.crud.rowAdd());
+        },
+        render() {
+          const crud = resolveComponent('avue-crud');
+          return h(
+            crud,
+            {
+              ref: 'crud',
+              modelValue: this.form,
+              'onUpdate:modelValue': v => (this.form = v),
+              option: this.option,
+              data: this.data,
+            },
+            {
+              'plateNo-form': () =>
+                h(resolveComponent('el-autocomplete'), {
+                  modelValue: this.form.plateNo,
+                  'onUpdate:modelValue': v => (this.form.plateNo = v),
+                  placeholder: '请选择车牌号',
+                  fetchSuggestions: (q, cb) => cb([]),
+                }),
+              'useDepartment-form': () =>
+                h(resolveComponent('el-cascader'), {
+                  modelValue: this.form.useDepartment,
+                  'onUpdate:modelValue': v => (this.form.useDepartment = v),
+                  options: tree,
+                  props: { label: 'title', value: 'id', children: 'children', checkStrictly: true },
+                  clearable: true,
+                  filterable: true,
+                  placeholder: '请选择使用部门',
+                }),
+            }
+          );
+        },
+      };
+
+      const app = createApp(Demo);
+      app.use(ElementPlus);
+      app.use(Avue);
+      app.mount('#app');
+      window.__app = app;
+    </script>
+  </body>
+</html>