tianheng-ui 0.1.81 → 0.1.84

package/packages/FormMaking/util/generateCode.js

@@ -1,157 +1,427 @@
-function findRemoteFunc(list, funcList, tokenFuncList, blankList) {
-  for (let i = 0; i < list.length; i++) {
-    if (list[i].type == "grid") {
-      list[i].options.columns.forEach(item => {
-        findRemoteFunc(item.list, funcList, tokenFuncList, blankList);
-      });
-    } else if (list[i].type == "tabs") {
-      list[i].options.columns.forEach(item => {
-        findRemoteFunc(item.list, funcList, tokenFuncList, blankList);
-      });
-    } else if (list[i].type == "table") {
-      // list[i].options.columns.forEach(item => {
-      findRemoteFunc(list[i].list, funcList, tokenFuncList, blankList);
-      // })
-    } else {
-      if (list[i].type == "blank") {
-        if (list[i].model) {
-          blankList.push({
-            name: list[i].model,
-            label: list[i].name
-          });
-        }
-      } else if (list[i].type == "upload") {
-        if (list[i].options.tokenFunc) {
-          tokenFuncList.push({
-            func: list[i].options.tokenFunc,
-            label: list[i].name,
-            model: list[i].model
-          });
-        }
-      } else {
-        if (list[i].options.remote.open && list[i].options.remote.api) {
-          funcList.push({
-            func: list[i].options.remote.api,
-            label: list[i].name,
-            model: list[i].model
-          });
-        }
-      }
-    }
-  }
-}
-
-export default function(config, type = "making") {
-  const funcList = [];
-
-  const tokenFuncList = [];
-
-  const blankList = [];
-
-  findRemoteFunc(
-    JSON.parse(config.formConfig).list,
-    funcList,
-    tokenFuncList,
-    blankList
-  );
-
-  let funcTemplate = "";
-
-  let blankTemplate = "";
-
-  for (let i = 0; i < funcList.length; i++) {
-    funcTemplate += `
-    ${funcList[i].func} (resolve) {
-      // ${funcList[i].label} ${funcList[i].model}
-      // Call callback function once get the data from remote server
-      // resolve(data)
-    },
-    `;
-  }
-
-  for (let i = 0; i < tokenFuncList.length; i++) {
-    funcTemplate += `
-    ${tokenFuncList[i].func} (resolve) {
-      // ${tokenFuncList[i].label} ${tokenFuncList[i].model}
-      // Call callback function once get the token
-      // resolve(token)
-    },
-    `;
-  }
-
-  for (let i = 0; i < blankList.length; i++) {
-    blankTemplate += `
-    <template slot="${blankList[i].name}" slot-scope="scope">
-      <!-- ${blankList[i].label} -->
-      <!-- use v-model="scope.model.${blankList[i].name}" to bind data -->
-    </template>
-    `;
-  }
-
-  if (type == "making") {
-    return `
-<template>
-  <th-form-making :config="formConfig" :oauthConfig="oauthConfig" :apiOptions="apiOptions" ref="makingForm">
-    <div slot="action">
-      <el-button type="danger" icon="el-icon-close" size="mini" @click="$router.go(-1)">关闭</el-button>
-      <el-button type="primary" icon="el-icon-finished" size="mini" @click="handleSubmit">保存</el-button>
-      <el-button type="warning" icon="el-icon-document-copy" size="mini" @click="handleSubmit">另存为</el-button>
-    </div>
-    ${blankTemplate}
-  </th-form-making>
-</template>
-
-<script>
-  export default {
-    data () {
-      return {
-        formConfig: ${config.formConfig},
-        apiOptions: ${config.apiOptions},
-        oauthConfig: ${config.oauthConfig},
-      }
-    },
-    methods: {
-      handleSubmit () {
-        this.$refs.makingForm.getData().then(res => {
-          console.log(res);
-        });
-      }
-    }
-  }
-</script>`;
-  } else {
-    return `
-<template>
-  <th-form-generate :config="formConfig" :value="formValue" :oauthConfig="oauthConfig" :slotKeys="slotKeys" @change="handleChange" @button-submit="handleSubmit" ref="generateForm">
-    ${blankTemplate}
-  </th-form-generate>
-</template>
-
-<script>
-  export default {
-    data () {
-      return {
-        formConfig: ${config.formConfig},
-        formValue: {},
-        oauthConfig: ${config.oauthConfig},
-        slotKeys: ${JSON.stringify(
-          blankList.map(item => {
-            return item.name;
-          })
-        )}
-      }
-    },
-    methods: {
-      handleChange (val) {
-        console.log(val);
-      },
-      handleSubmit () {
-        this.$refs.generateForm.getData().then(res => {
-          console.log(res);
-        });
-      }
-    }
-  }
-</script>`;
-  }
-}
+function findRemoteFunc(list, funcList, tokenFuncList, blankList) {
+  for (let i = 0; i < list.length; i++) {
+    if (list[i].type == "grid") {
+      list[i].options.columns.forEach(item => {
+        findRemoteFunc(item.list, funcList, tokenFuncList, blankList);
+      });
+    } else if (list[i].type == "tabs") {
+      list[i].options.columns.forEach(item => {
+        findRemoteFunc(item.list, funcList, tokenFuncList, blankList);
+      });
+    } else if (list[i].type == "table") {
+      // list[i].options.columns.forEach(item => {
+      findRemoteFunc(list[i].options, funcList, tokenFuncList, blankList);
+      // })
+    } else {
+      if (list[i].type == "blank") {
+        if (list[i].model) {
+          blankList.push({
+            name: list[i].model,
+            label: list[i].name
+          });
+        }
+      } else if (list[i].type == "upload") {
+        if (list[i].options.tokenFunc) {
+          tokenFuncList.push({
+            func: list[i].options.tokenFunc,
+            label: list[i].name,
+            model: list[i].model
+          });
+        }
+      } else {
+        if (list[i].options.remote?.open && list[i].options.remote?.api) {
+          funcList.push({
+            func: list[i].options.remote.api,
+            label: list[i].name,
+            model: list[i].model
+          });
+        }
+      }
+    }
+  }
+}
+
+export default function(config, type = "making") {
+  const formConfigStr = JSON.stringify(config.formConfig, null, 2);
+  const apiOptionsStr = JSON.stringify(config.apiOptions, null, 2);
+  const oauthConfigStr = JSON.stringify(config.oauthConfig, null, 2);
+
+  const funcList = []; //方法函数列表
+  const tokenFuncList = [];
+  const blankList = []; //自定义插槽
+
+  findRemoteFunc(config.formConfig.list, funcList, tokenFuncList, blankList);
+
+  let funcTemplate = "";
+
+  let blankTemplate = "";
+
+  for (let i = 0; i < funcList.length; i++) {
+    funcTemplate += `
+    ${funcList[i].func} (resolve) {
+      // ${funcList[i].label} ${funcList[i].model}
+      // Call callback function once get the data from remote server
+      // resolve(data)
+    },
+    `;
+  }
+
+  for (let i = 0; i < tokenFuncList.length; i++) {
+    funcTemplate += `
+    ${tokenFuncList[i].func} (resolve) {
+      // ${tokenFuncList[i].label} ${tokenFuncList[i].model}
+      // Call callback function once get the token
+      // resolve(token)
+    },
+    `;
+  }
+
+  for (let i = 0; i < blankList.length; i++) {
+    blankTemplate += `
+    <template slot="${blankList[i].name}" slot-scope="scope">
+      <!-- ${blankList[i].label} -->
+      <!-- use v-model="scope.model.${blankList[i].name}" to bind data -->
+    </template>
+    `;
+  }
+
+  if (type === "making") {
+    return `
+<template>
+  <th-form-making :config="formConfig" :oauthConfig="oauthConfig" :apiOptions="apiOptions" ref="makingForm">
+    <div slot="action">
+      <el-button type="danger" icon="el-icon-close" size="mini" @click="$router.go(-1)">关闭</el-button>
+      <el-button type="primary" icon="el-icon-finished" size="mini" @click="handleSubmit">保存</el-button>
+      <el-button type="warning" icon="el-icon-document-copy" size="mini" @click="handleSubmit">另存为</el-button>
+    </div>
+    ${blankTemplate}
+  </th-form-making>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        formConfig: ${formConfigStr},
+        apiOptions: ${apiOptionsStr},
+        oauthConfig: ${oauthConfigStr},
+      }
+    },
+    methods: {
+      handleSubmit () {
+        this.$refs.makingForm.getData().then(res => {
+          console.log(res);
+        });
+      }
+    }
+  }
+</script>`;
+  }
+  if (type === "generate") {
+    return `
+<template>
+  <th-form-generate :config="formConfig" :value="formValue" :oauthConfig="oauthConfig" :slotKeys="slotKeys" @change="handleChange" @button-submit="handleSubmit" ref="generateForm">
+    ${blankTemplate}
+  </th-form-generate>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        formConfig: ${formConfigStr},
+        formValue: {},
+        oauthConfig: ${oauthConfigStr},
+        slotKeys: ${JSON.stringify(
+          blankList.map(item => {
+            return item.name;
+          })
+        )}
+      }
+    },
+    methods: {
+      handleChange (val) {
+        console.log(val);
+      },
+      handleSubmit () {
+        this.$refs.generateForm.getData().then(res => {
+          console.log(res);
+        });
+      }
+    }
+  }
+</script>`;
+  }
+  if (type === "codeSnippet") {
+    return codeSnippet(config);
+  }
+}
+
+const codeSnippet = config => {
+  let templateNode = "";
+  for (let i = 0; i < config.formConfig.list.length; i++) {
+    const element = config.formConfig.list[i];
+    templateNode += nodeList(element);
+  }
+
+  return templateNode;
+};
+
+const nodeList = element => {
+  if (element.type === "page-table") {
+    const treeConfig = element.options.columns.tree;
+    const searchConfig = element.options.columns.search;
+    const toolsConfig = element.options.columns.tools;
+    const tableConfig = element.options.columns.table;
+    // 搜索
+    let searchParams = {};
+    let searchDom = "";
+    if (searchConfig.show) {
+      let searchItemNodes = "";
+      searchConfig.list.map(item => {
+        searchParams[item.model] = item.options.defaultValue;
+        searchItemNodes += `<a-col :span="${searchConfig.props.grid.span}">
+                <a-form-item label="${item.name}" name="${item.model}">
+                  ${nodeList(item)}
+                </a-form-item>
+              </a-col>
+              `;
+      });
+      searchDom = `<a-card :bordered="false" :body-style="{ 'margin-bottom': '10px' }">
+        <a-form ref="searchFormRef" :model="state.searchParams" :colon="false">
+          <a-row :gutter="${searchConfig.props.grid.gutter}">
+            ${searchItemNodes}
+            <a-col :span="${searchConfig.props.grid.span}">
+              <a-space>
+                <a-button type="primary" @click="getData">查询</a-button>
+                <a-button @click="handleReset">重置</a-button>
+              </a-space>
+            </a-col>
+          </a-row>
+        </a-form>
+      </a-card>
+  `;
+    }
+
+    let treeDom = "";
+    if (treeConfig.show) {
+      treeDom = `<a-card :bordered="false">
+        <a-tree
+          v-if="state.tree.data.length"
+          :treeData="state.tree.data"
+          v-model:selectedKeys="state.tree.selectedKeys" 
+          ${
+            treeConfig.props.checkable
+              ? 'v-model:checkedKeys="state.tree.checkedKeys"'
+              : ""
+          }
+          :checkable="state.tree.checkable"
+          :defaultExpandAll="state.tree.defaultExpandAll"
+          :field-names="state.tree.fieldNames"
+          @select="handleTableLoad">
+        </a-tree>
+      </a-card>`;
+    }
+
+    let toolsDom = "";
+    if (toolsConfig.show) {
+      toolsDom = "<a-space>";
+      toolsConfig.list.map(item => {
+        toolsDom += `
+          <a-button type="${
+            item.options.buttonType
+          }" @click="handleToolsClick('${item.options.defaultValue}')">
+            ${
+              item.options.buttonIcon
+                ? `<template #icon><${item.options.buttonIcon} /></template>`
+                : ""
+            }
+            ${item.options.defaultValue}
+          </a-button>`;
+      });
+      toolsDom += `
+        </a-space>`;
+    }
+
+    let tableDom = "";
+    if (tableConfig.show) {
+      tableDom = `<a-card :bordered="false">
+        ${toolsDom}
+        <a-table
+          :columns="state.tableColumns"
+          :data-source="state.tableData"
+          :pagination="state.pagination"
+          @change="handleTableChange"
+        >
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.dataIndex === 'action'">
+              <span>
+                <a @click="handleActionClick(record)">编辑</a>
+                <a-divider type="vertical" />
+                <a @click="handleActionClick(record)">删除</a>
+              </span>
+            </template>
+            <template v-else>{{ record[column.dataIndex] }}</template>
+          </template>
+        </a-table>
+      </a-card>`;
+    }
+
+    const nodeStr = `
+<!-- ${element.name} -->
+<template>
+  <a-row :gutter="${element.options.gutter}">
+    <a-col :span="4">
+      ${treeDom}
+    </a-col>
+
+    <a-col :span="20">
+      ${searchDom}
+      ${tableDom}
+    </a-col>
+  </a-row>
+
+  <!-- 弹窗 -->
+  <a-modal :width="1200" v-model:visible="state.modal.show" title="标题" destroyOnClose @ok="handleModalOk">
+    <!-- 此处放弹窗业务代码，示例： -->
+    <a-form v-if="state.modal.action === '新增'" ref="addFormRef" :model="state.modal.data" autocomplete="off">
+      <a-form-item
+        label="Username"
+        name="username"
+        :rules="[{ required: true, message: 'Please input your username!' }]"
+      >
+        <a-input v-model:value="state.modal.data.username" />
+      </a-form-item>
+
+      <a-form-item
+        label="Password"
+        name="password"
+        :rules="[{ required: true, message: 'Please input your password!' }]"
+      >
+        <a-input-password v-model:value="state.modal.data.password" />
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<script setup>
+  import { ref, reactive, onMounted } from 'vue'
+  // 引入api文件
+  // import api from '@/api/xxx.js'
+
+  // 定义变量 
+  const state = reactive({
+    tree: ${JSON.stringify(treeConfig.props, null, 2)},
+    searchParams: ${JSON.stringify(searchParams)},
+    tableColumns: ${JSON.stringify(tableConfig.columns)},
+    tableData: ${JSON.stringify(tableConfig.data)},
+    pagination: ${
+      tableConfig.pagination.show
+        ? JSON.stringify(tableConfig.pagination.options)
+        : false
+    },
+    modal: { show: false, action: '', data: {} }
+  })
+  // 搜索区域实例
+	const searchFormRef = ref(null)
+  // 新增表单实例
+  const addFormRef = ref(null)
+
+	// 页面挂载完成
+	onMounted(() => {
+		getData()
+	})
+
+  // 数据请求
+  const getData = () =>{
+    ${
+      tableConfig.pagination.show
+        ? `
+    const {current, pageSize} = state.pagination
+    let params = {
+      current,
+      size: pageSize,
+      treeValue: state.tree.selectedKeys[0],
+      ...state.searchParams
+    }
+    api.getTableData(params).then((res) => {
+      state.pagination.total = res.total
+      const records = res.records
+      if (current === 1)  state.tableData = records
+      else  state.tableData = state.tableData.concat(records)
+    })
+    `
+        : `
+    let params = {
+      treeValue: state.tree.selectedKeys[0],
+      ...state.searchParams
+    }
+    api.getTableData(params).then((res) => {
+      const data = res.data
+      state.tableData = data
+    })
+    `
+    }
+  }
+
+	const handleTableLoad = (val) => {
+    ${tableConfig.pagination.show ? "state.pagination.current = 1" : ""}
+    getData()
+	}
+
+  const handleReset = () => {
+    // 表单重置到初始状态
+		searchFormRef.value.resetFields()
+    handleTableLoad()
+	}
+
+  const handleActionClick = () => {
+    
+  }
+
+  const handleToolsClick = (val) => {
+    state.modal = { show: true, action: val, data: {} }
+  }
+
+	const handleModalOk = () => {
+		addFormRef.value.validate().then((res) => {
+			console.log(state.modal.data)
+			// 此处编写提交方法
+			// ...
+			// 提交成功后，关闭弹窗 handleModalCancel
+			handleModalCancel()
+		})
+	}
+
+	const handleModalCancel = () => {
+		state.modal = { show: false, action: '', data: {} }
+	}
+
+</script>
+\n\n`;
+
+    return nodeStr;
+  }
+
+  if (element.type === "input") {
+    let nodeStr = `<a-input v-model:value="state.searchParams.${element.model}"`;
+    if (element.options.maxlength !== -1)
+      nodeStr += ` maxLength="${element.options.maxlength}"`;
+    if (element.options.placeholder)
+      nodeStr += ` placeholder="${element.options.placeholder}"`;
+    if (element.options.disabled) nodeStr += " disabled";
+    if (element.options.clearable) nodeStr += " allow-clear";
+    nodeStr += " />\n";
+    return nodeStr;
+  }
+
+  if (element.type === "textarea") {
+    const nodeStr = `<a-textarea v-model:value="state.searchParams.${element.model}" maxLength="200" placeholder="请输入" auto-size allow-clear />\n`;
+    return nodeStr;
+  }
+
+  if (element.type === "select") {
+    const nodeStr = `<a-select v-model:value="state.searchParams.${element.model}" placeholder="请输入" allow-clear @change="handleSelectChange" />\n`;
+    return nodeStr;
+  }
+};