Mon Sep 18 17:29:00 CST 2023 inscode

src/App.vue

-<script setup>
-import { Loading, Edit } from '@element-plus/icons-vue';
-</script>
+
 
 <template>
   <div id="container">
     <!-- 主内容 -->
     <div id="content">
-      <!-- 标题 -->
-      
+      <div id="my_title">
+        <!-- 标题 -->
+        <el-icon class="is-loading" size="30px" color="#e13030">
+          <Cpu />
+        </el-icon>
+        <div id="title_text">生成Vue表格功能组件</div>
+        <el-icon class="is-loading" size="30px" color="#3075e1">
+          <Cpu />
+        </el-icon>
+      </div>
+      <!-- 说明 -->
+      <div id="desc">
+        <div style="margin-top:20px;"><span style="font-weight: 600;">说明</span>：根据数据表字段生成与基于vue2的前端增删改分页查组件。</div>
+        <div style="margin-top:10px;"><span
+            style="font-weight: 600;">用法</span>：将生成的vue功能组件放到自己的框架中，即可生成基于数据表的前端表格视图（后台自己提供）</div>
+      </div>
       <!-- 表单 -->
+      <div id="my_form">
+        <!-- 字段个数输入 -->
+        <div id="field_number">
+          <el-input v-model="fieldNumber" placeholder="数据表中字段的个数" id="filedN" type="number" max="20"></el-input>
+          <el-button type="primary" style="margin-left:3px;" @click="selectHandle">确定</el-button>
+          <el-button style="margin-left:6px;" @click="resetHandle">重置</el-button>
+        </div>
+        <!-- 字段表单 -->
+        <div id="field_form" v-if="fieldBoxFlag">
+          <div class="fieldItem" v-for="(item, index) in fieldList" :key="index">
+            <span id="first">字段名：</span>
+            <el-input style="height: 30px;" v-model="item.prop"></el-input>
+            <span style="margin-left: 20px;">注释：</span>
+            <el-input v-model="item.label"></el-input>
+          </div>
+          <!-- 提交 -->
+          <div>
+            <el-button type="primary" id="genBtn" @click="generateHandle">提交</el-button>
+            <div style="height: 20px;"></div>
+          </div>
+        </div>
+        <!-- 实例图片 -->
+        <div id="ex">
 
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
+<script setup>
+import { Cpu } from '@element-plus/icons-vue';
+import { ref, reactive } from "vue";
+import { ElMessage } from "element-plus";
+
+// 字段个数
+let fieldNumber = ref("");
+
+// 字段输入框是否显示标识
+let fieldBoxFlag = ref(false);
+
+// 存储用户输入的字段信息
+let fieldList = reactive([]);
+
+// 生成指定个数的字段输入框
+function selectHandle() {
+  // 判断为空 和 数值限制
+  if(fieldNumber.value == ""){
+    ElMessage("输入为空");
+    return;
+  }
+
+  if(fieldNumber.value <= 0){
+    ElMessage("输入不合法");
+    return;
+  }
+  
+
+  if(fieldNumber.value > 20){
+    ElMessage("最大个数为20");
+    return;
+  }
+
+  // 显示字段输入
+  fieldBoxFlag.value = true;
+  // 初始化表格列表字段
+  fieldList.length = fieldNumber.value;
+  for (let i = 0; i < fieldList.length; i++) {
+    fieldList[i] = { prop: "", label: "" }
+  }
+}
+
+// 重置表单
+function resetHandle(){
+  fieldNumber.value = "";
+  fieldBoxFlag.value = false;
+}
+
+// 生成处理器
+function generateHandle() {
+
+}
+</script>
+
 <style scoped>
 * {
   padding: 0px;
@@ -21,6 +112,63 @@ import { Loading, Edit } from '@element-plus/icons-vue';
   box-sizing: border-box;
 }
 
+#content {
+  margin: 0 auto;
+  max-width: 1250px;
+  border: solid 1px rgb(172, 169, 169);
+  overflow-y: auto;
+}
+
+#genBtn {
+  margin-left: 520px;
+  margin-top: 15px;
+  width: 80px;
+}
+
+.fieldItem {
+  display: flex;
+  width: 600px;
+  line-height: 30px;
+  margin-top: 10px;
+}
+
+.fieldItem span {
+  width: 130px;
+}
+
+.fieldItem #first {
+  width: 180px;
+}
+
+#filed_form {
+  margin-top: 10px;
+}
+
+#my_form {
+  height: 500px;
+  margin-top: 20px;
+  padding: 0px 20px;
+}
+
+#field_form {
+  margin-top: 20px;
+}
+
+#field_number {
+  width: fit-content;
+  display: flex;
+}
+
+#filedN {
+  width: 300px;
+}
+
+#desc {
+  margin-top: 30px;
+  margin-left: 20px;
+  text-decoration: underline dotted;
+}
+
 #container {
   /* border: solid red 1px; */
   background: linear-gradient(rgb(224, 238, 247), 10%, #fff);
@@ -28,4 +176,15 @@ import { Loading, Edit } from '@element-plus/icons-vue';
   border-radius: 5px;
   margin-top: -10px;
 }
+
+#my_title {
+  display: flex;
+  justify-content: center;
+  padding-top: 20px;
+}
+
+#title_text {
+  font-size: 20px;
+  padding: 0px 10px;
+}
 </style>