cloud-web-corejs 1.0.281 → 1.1.0-dev.11

package/src/views/support/form-dialog-demo/index.vue

@@ -0,0 +1,537 @@
+<template>
+  <div class="app-container form-dialog-demo">
+    <el-card shadow="never">
+      <div slot="header">$formDialog 表单弹框示例</div>
+      <div class="btns">
+        <el-button type="primary" @click="openBasic">1. 基础新增表单</el-button>
+        <el-button type="primary" @click="openEdit">2. 编辑回显</el-button>
+        <el-button type="primary" @click="openReadonly">3. 只读查看</el-button>
+        <el-button type="primary" @click="openAllTypes"
+          >4. 全字段类型（两列布局）</el-button
+        >
+        <el-button type="primary" @click="openBeforeConfirm"
+          >5. beforeConfirm 异步保存</el-button
+        >
+        <el-button type="primary" @click="openCustomRender"
+          >6. 自定义 render 控件</el-button
+        >
+        <el-button type="primary" @click="openNested"
+          >7. 叠开两层弹框</el-button
+        >
+        <el-button type="primary" @click="openDataSource"
+          >8. 搜索框 + 下拉数据源（静态/词汇/脚本）</el-button
+        >
+        <el-button type="primary" @click="openLinkage"
+          >9. 字段联动（级联/显隐/禁用/onChange）</el-button
+        >
+        <el-button type="primary" @click="openXform"
+          >10. xform 整表模式（formCode）</el-button
+        >
+        <el-button type="primary" @click="openXformReadonly"
+          >11. xform 整表只读查看</el-button
+        >
+      </div>
+    </el-card>
+
+    <el-card shadow="never" style="margin-top: 16px">
+      <div slot="header">最近一次返回结果（取消/关闭为 null）</div>
+      <pre class="result">{{ result }}</pre>
+    </el-card>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "formDialogDemo",
+  data() {
+    return {
+      result: "（还未调用）",
+    };
+  },
+  methods: {
+    show(data) {
+      this.result = data === null ? "null" : JSON.stringify(data, null, 2);
+    },
+
+    // 1. 基础新增：必填校验 + 常用控件
+    async openBasic() {
+      const data = await this.$formDialog({
+        title: "新增分类",
+        fields: [
+          { prop: "name", label: "名称", required: true },
+          {
+            prop: "type",
+            label: "类型",
+            type: "select",
+            required: true,
+            options: [
+              { label: "普通", value: 1 },
+              { label: "重要", value: 2 },
+            ],
+          },
+          { prop: "enabled", label: "启用", type: "switch" },
+          { prop: "remark", label: "备注", type: "textarea" },
+        ],
+      });
+      this.show(data);
+    },
+
+    // 2. 编辑回显：model 传初始值
+    async openEdit() {
+      const data = await this.$formDialog({
+        title: "编辑分类",
+        model: {
+          name: "季度促销",
+          type: 2,
+          enabled: true,
+          remark: "从列表行数据带入的初始值",
+        },
+        fields: [
+          { prop: "name", label: "名称", required: true },
+          {
+            prop: "type",
+            label: "类型",
+            type: "select",
+            options: [
+              { label: "普通", value: 1 },
+              { label: "重要", value: 2 },
+            ],
+          },
+          { prop: "enabled", label: "启用", type: "switch" },
+          { prop: "remark", label: "备注", type: "textarea" },
+        ],
+      });
+      this.show(data);
+    },
+
+    // 3. 只读查看：readonly=true，整表单禁用，底部只有关闭
+    async openReadonly() {
+      const data = await this.$formDialog({
+        title: "查看分类",
+        readonly: true,
+        model: { name: "季度促销", type: 2, enabled: true, remark: "只读模式" },
+        fields: [
+          { prop: "name", label: "名称" },
+          {
+            prop: "type",
+            label: "类型",
+            type: "select",
+            options: [
+              { label: "普通", value: 1 },
+              { label: "重要", value: 2 },
+            ],
+          },
+          { prop: "enabled", label: "启用", type: "switch" },
+          { prop: "remark", label: "备注", type: "textarea" },
+        ],
+      });
+      this.show(data);
+    },
+
+    // 4. 全字段类型 + span 两列布局 + 自定义 rules + 控件透传 props
+    async openAllTypes() {
+      const data = await this.$formDialog({
+        title: "全字段类型",
+        width: "760px",
+        rules: {
+          qty: [
+            {
+              validator: (rule, value, callback) => {
+                if (value != null && value % 2 !== 0) {
+                  callback(new Error("数量必须是偶数（自定义 rules 示例）"));
+                } else {
+                  callback();
+                }
+              },
+              trigger: "change",
+            },
+          ],
+        },
+        fields: [
+          { prop: "name", label: "文本", span: 12, required: true },
+          {
+            // 数字框走 baseInputNumber：scale 限小数位（0=整数），negative 允许负数
+            prop: "qty",
+            label: "数量",
+            type: "number",
+            span: 12,
+            scale: 0,
+            props: { min: 0, max: 100 },
+          },
+          {
+            prop: "amount",
+            label: "金额",
+            type: "number",
+            span: 12,
+            scale: 2,
+            negative: true,
+          },
+          { prop: "date", label: "日期", type: "date", span: 12 },
+          { prop: "time", label: "日期时间", type: "datetime", span: 12 },
+          { prop: "range", label: "日期区间", type: "daterange", span: 24 },
+          {
+            prop: "level",
+            label: "单选",
+            type: "radio",
+            span: 12,
+            options: [
+              { label: "低", value: "L" },
+              { label: "中", value: "M" },
+              { label: "高", value: "H" },
+            ],
+          },
+          {
+            prop: "tags",
+            label: "多选",
+            type: "checkbox",
+            span: 12,
+            options: ["标签A", "标签B", "标签C"],
+          },
+          { prop: "enabled", label: "开关", type: "switch", span: 12 },
+          {
+            prop: "locked",
+            label: "禁用控件",
+            type: "switch",
+            span: 12,
+            disabled: true,
+          },
+        ],
+      });
+      this.show(data);
+    },
+
+    // 5. beforeConfirm：确认前调接口，失败不关闭弹框
+    async openBeforeConfirm() {
+      const data = await this.$formDialog({
+        title: "异步保存（勾选“模拟失败”体验保存失败不关闭）",
+        fields: [
+          { prop: "name", label: "名称", required: true },
+          { prop: "mockFail", label: "模拟失败", type: "switch" },
+        ],
+        beforeConfirm: (formData) =>
+          new Promise((resolve, reject) => {
+            // 实际业务里这里通常是 this.$http({...}) 保存请求
+            setTimeout(() => {
+              if (formData.mockFail) {
+                this.$baseMessage({
+                  message: "保存失败，弹框保持打开",
+                  type: "error",
+                });
+                reject(new Error("mock fail"));
+              } else {
+                resolve();
+              }
+            }, 800);
+          }),
+      });
+      this.show(data);
+    },
+
+    // 6. render 逃生口：内置类型覆盖不了的控件自己渲染
+    async openCustomRender() {
+      const data = await this.$formDialog({
+        title: "自定义 render 控件",
+        model: { score: 3, percent: 40 },
+        fields: [
+          { prop: "name", label: "名称", required: true },
+          {
+            prop: "score",
+            label: "评分",
+            render: (h, model) =>
+              h("el-rate", {
+                props: { value: model.score },
+                style: "margin-top:8px",
+                on: {
+                  input: (val) => {
+                    model.score = val;
+                  },
+                },
+              }),
+          },
+          {
+            prop: "percent",
+            label: "进度",
+            render: (h, model) =>
+              h("el-slider", {
+                props: { value: model.percent },
+                on: {
+                  input: (val) => {
+                    model.percent = val;
+                  },
+                },
+              }),
+          },
+        ],
+      });
+      this.show(data);
+    },
+
+    // 7. 叠开两层：第一层确认后基于结果打开第二层
+    async openNested() {
+      const first = await this.$formDialog({
+        title: "第一层：选择类型",
+        fields: [
+          {
+            prop: "type",
+            label: "类型",
+            type: "select",
+            required: true,
+            options: [
+              { label: "普通", value: 1 },
+              { label: "重要", value: 2 },
+            ],
+          },
+        ],
+      });
+      if (first === null) {
+        this.show(null);
+        return;
+      }
+      const second = await this.$formDialog({
+        title: `第二层：填写${first.type === 2 ? "重要" : "普通"}事项`,
+        model: { type: first.type },
+        fields: [
+          { prop: "name", label: "名称", required: true },
+          { prop: "remark", label: "备注", type: "textarea" },
+        ],
+      });
+      this.show(second === null ? null : { ...first, ...second });
+    },
+
+    // 8. 搜索框 + 下拉数据源：静态 options / 词汇 dictCode / 脚本 scriptCode
+    async openDataSource() {
+      const customers = [
+        { id: 1001, name: "华南贸易有限公司" },
+        { id: 1002, name: "北方物流集团" },
+        { id: 1003, name: "东部电子科技" },
+      ];
+      const data = await this.$formDialog({
+        title: "搜索框与下拉数据源",
+        labelWidth: "120px",
+        fields: [
+          {
+            prop: "staticType",
+            label: "静态下拉",
+            type: "select",
+            options: [
+              { label: "普通", value: 1 },
+              { label: "重要", value: 2 },
+            ],
+          },
+          {
+            // 词汇下拉：显示 value、取值 sn；dictCode 替换为环境中存在的词汇编码
+            prop: "dictType",
+            label: "词汇下拉",
+            type: "select",
+            dictCode: "kehuGrade",
+          },
+          {
+            // 脚本下拉："formCode/scriptCode"，labelField/valueField 按脚本返回结构调整；
+            // 也可用 parseOptions: (res) => [{label, value}] 完全自定义解析
+            prop: "scriptType",
+            label: "脚本下拉",
+            type: "select",
+            scriptCode: "/intf/listUsers",
+            labelField: "nick_name",
+            valueField: "id",
+          },
+          {
+            // 搜索方式1：onSearch 完全自定义（这里用嵌套 formDialog 模拟选择）
+            prop: "customerName",
+            label: "客户（onSearch）",
+            type: "search",
+            required: true,
+            placeholder: "点击搜索按钮选择",
+            onSearch: async (model) => {
+              const picked = await this.$formDialog({
+                title: "选择客户",
+                width: "420px",
+                fields: [
+                  {
+                    prop: "customerId",
+                    label: "客户",
+                    type: "select",
+                    required: true,
+                    options: customers.map((item) => ({
+                      label: item.name,
+                      value: item.id,
+                    })),
+                  },
+                ],
+              });
+              if (picked) {
+                const row = customers.find(
+                  (item) => item.id === picked.customerId
+                );
+                model.customerId = row.id;
+                model.customerName = row.name;
+              }
+            },
+            // 清除时把关联的 id 一起清掉
+            onClear: (model) => {
+              model.customerId = null;
+              model.customerName = null;
+            },
+          },
+          {
+            // 搜索方式2：searchComponent 打开自定义 Vue 弹框组件，
+            // 组件 $emit("confirm", rows) 后按 fieldMap 回写 model
+            prop: "supplierName",
+            label: "供应商（Vue弹框）",
+            type: "search",
+            placeholder: "点击搜索按钮选择",
+            searchComponent: {
+              componentPath: "views/user/user/dialog.vue",
+              fieldMap: { supplierId: "id", supplierName: "nickName" },
+            },
+            onClear: (model) => {
+              model.supplierId = null;
+              model.supplierName = null;
+            },
+          },
+          {
+            // 搜索方式3：searchDialog 打开 xform 搜索弹框（searchFormDialog），
+            // formCode 替换为环境中已配置搜索弹框的表单编码
+            prop: "billName",
+            label: "单据（xform弹框）",
+            type: "search",
+            placeholder: "点击搜索按钮选择",
+            searchDialog: {
+              formCode: "user_dialog",
+              multiple: false,
+              // queryParam: {...},           // 额外查询参数
+              fieldMap: { billId: "id", billName: "nick_name" },
+              // onConfirm: (model, rows) => {...}  // 或完全自定义回写
+            },
+            onClear: (model) => {
+              model.billId = null;
+              model.billName = null;
+            },
+          },
+        ],
+      });
+      this.show(data);
+    },
+
+    // 9. 字段联动：级联下拉(dependsOn) + 显隐(visible) + 禁用(disabled) + onChange
+    async openLinkage() {
+      const cityMap = {
+        gd: [
+          { label: "广州", value: "gz" },
+          { label: "深圳", value: "sz" },
+        ],
+        hn: [
+          { label: "长沙", value: "cs" },
+          { label: "岳阳", value: "yy" },
+        ],
+      };
+      const data = await this.$formDialog({
+        title: "字段联动",
+        fields: [
+          {
+            prop: "province",
+            label: "省份",
+            type: "select",
+            required: true,
+            options: [
+              { label: "广东", value: "gd" },
+              { label: "湖南", value: "hn" },
+            ],
+            // onChange(value, model, field, dialog)：dialog 上有
+            // setFieldOptions / reloadFieldOptions 可手动控制其他字段选项
+            onChange: (val, model) => {
+              model.provinceName = { gd: "广东", hn: "湖南" }[val] || null;
+            },
+          },
+          {
+            // 级联：province 变化时自动清空 city；选项用函数按 model 动态取。
+            // 若选项来自 dictCode/scriptCode，dependsOn 还会自动重新拉取
+            //（dictData/scriptData 支持函数形式 (model) => ({...})）
+            prop: "city",
+            label: "城市",
+            type: "select",
+            required: true,
+            dependsOn: ["province"],
+            options: (model) => cityMap[model.province] || [],
+          },
+          { prop: "needInvoice", label: "需要发票", type: "switch" },
+          {
+            // 显隐联动：开关打开才显示；隐藏时不渲染也不参与必填校验
+            prop: "taxNo",
+            label: "税号",
+            required: true,
+            visible: (model) => model.needInvoice === true,
+          },
+          {
+            prop: "level",
+            label: "等级",
+            type: "radio",
+            options: [
+              { label: "普通", value: 1 },
+              { label: "特殊", value: 2 },
+            ],
+          },
+          {
+            // 禁用联动：等级为"特殊"才允许填原因
+            prop: "reason",
+            label: "特殊原因",
+            type: "textarea",
+            disabled: (model) => model.level !== 2,
+          },
+        ],
+      });
+      this.show(data);
+    },
+
+    // 10. xform 整表模式：formCode 渲染设计器里配置好的表单，确认走 xform 校验
+    //     formCode 为占位编码，按环境替换为已发布的表单模板编码
+    async openXform() {
+      const data = await this.$formDialog({
+        formCode: "demoForm",
+        // title 不传时默认取表单模板名称；width 默认 1000px
+        // model: { name: "初始值" },          // 初始数据（结构与 getFormData 一致）
+        // optionData / globalDsv 可透传给 VFormRender
+        // onReady: (formRef, dialog) => {},  // 表单挂载后回调，可调 setFieldValue 等
+        beforeConfirm: (formData) => {
+          // 常规用法：这里调保存接口，reject 则弹框不关闭
+          console.log("xform 表单数据", formData);
+        },
+      });
+      this.show(data);
+    },
+
+    // 11. xform 整表只读：readonly=true 走 setReadMode，底部只有关闭
+    async openXformReadonly() {
+      const data = await this.$formDialog({
+        formCode: "demoForm",
+        readonly: true,
+        model: {},
+      });
+      this.show(data);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.form-dialog-demo {
+  padding: 16px;
+
+  .btns {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+
+    .el-button {
+      margin-left: 0;
+    }
+  }
+
+  .result {
+    margin: 0;
+    min-height: 60px;
+    white-space: pre-wrap;
+    word-break: break-all;
+  }
+}
+</style>