kz-ui-base 1.0.130 → 1.0.132

package/common/src/views/login.vue

@@ -258,9 +258,19 @@ export default {
           }
           this.$store
             .dispatch("Login", this.loginForm)
-            .then(() => {
+            .then((rs) => {
               getAllRouters().then((res) => {
                 localforage.setItem("getAllRouters", res.data);
+                  if (rs.code == 209) {
+                  this.$router.push({
+                    path: "/changePassword",
+                    query: {
+                      password: 1,
+                      tenantName: this.$route.query.tenantName,
+                    },
+                  });
+                  return;
+                }
                 this.$router
                   .push({ path: this.redirect || "/" })
                   .catch(() => {});

package/common/src/views/tenantLogin.vue

@@ -248,9 +248,19 @@ export default {
           }
           this.$store
             .dispatch("Login", this.loginForm)
-            .then(() => {
+            .then((rs) => {
               getAllRouters().then((res) => {
                 localforage.setItem("getAllRouters", res.data);
+                  if (rs.code == 209) {
+                  this.$router.push({
+                    path: "/changePassword",
+                    query: {
+                      password: 1,
+                      tenantName: this.$route.query.tenantName,
+                    },
+                  });
+                  return;
+                }
                 this.$router
                   .push({ path: this.redirect || "/" })
                   .catch(() => {});

package/components/customForm/formColumns.vue

@@ -1,130 +1,118 @@
 <template>
-  <div class="">
+  <div class="form-container">
+    <!-- 非Tab区域 -->
     <template v-for="item in areaSetting">
-      <div
-        v-if="item.visible && item.type != 'tab' && item.text"
-        :key="item.type"
-        class="borderClass"
-      >
-        <i :class="item.icon"></i>{{ item.text }}
-      </div>
-      <el-col
-        v-for="(column, index) in columns"
-         :key="index"
-        :span="column.width || 12"
-        :disabled="column.disabled"
-        :class="column.alteration?'alterationRed':''"
-        :style="{
-          height:
-            column.displayType == 'Upload'
-              ? ''
-              : column.displayType == 'Editor'
-              ? '280px'
-              : '',
-          clear: column.wrap ? 'both' : '',
-        }"
+      <template v-if="item.type !== 'tab'">
+        <!-- 区域标题 -->
+        <div
+          v-if="item.visible && item.text"
+          :key="`title-${item.type}`"
+          class="area-title borderClass"
+        >
+          <i v-if="item.icon" :class="item.icon"></i>{{ item.text }}
+        </div>
+
+        <!-- 区域内容 -->
+        <el-row
+          v-if="item.visible"
+          :key="`content-${item.type}`"
+          :gutter="20"
+          class="area-content"
+        >
+          <!-- 折叠面板区域 -->
+          <template v-if="item.name === 'basic'">
+            <el-col :span="24" v-if="hasFoldColumns">
+              <el-collapse v-model="activeName" accordion>
+                <el-collapse-item title="折叠区域" name="fold-area">
+                  <el-row :gutter="20">
+                    <el-col
+                      v-for="(column, index) in foldColumns"
+                      :key="`fold-${index}`"
+                      :span="column.width || 12"
+                      :class="column.alteration ? 'alterationRed' : ''"
+                      class="form-item-col"
+                    >
+                      <component
+                        ref="editDialog"
+                        :disabled="column.disabled"
+                        :is="getComponentType(column)"
+                        :columns="columns"
+                        :column="column"
+                        :entity.sync="entity"
+                        :setting.sync="column.setting"
+                        :value="entity[column.property]"
+                        @assignment="assignment"
+                        @change="onChangeEvent"
+                        @onSearch="onSearch"
+                      />
+                    </el-col>
+                  </el-row>
+                </el-collapse-item>
+              </el-collapse>
+            </el-col>
+          </template>
+
+          <!-- 普通字段区域 -->
+          <template v-for="(column, index) in getAreaColumns(item.name)">
+            <el-col
+              v-if="shouldRenderColumn(column, item)"
+              :key="`${item.name}-${index}`"
+              :span="column.width || 12"
+              :class="column.alteration ? 'alterationRed' : ''"
+              class="form-item-col"
+              :style="getColumnStyle(column)"
+            >
+              <component
+                ref="editDialog"
+                :disabled="column.disabled"
+                :is="getComponentType(column)"
+                :columns="columns"
+                :column="column"
+                :entity.sync="entity"
+                :setting.sync="column.setting"
+                :value="entity[column.property]"
+                @assignment="assignment"
+                @change="onChangeEvent"
+                @clickDialog="clickDialog"
+                @onSearch="onSearch"
+              />
+            </el-col>
+          </template>
+        </el-row>
+      </template>
+    </template>
+
+    <!-- Tab区域 -->
+    <el-tabs v-model="activeTabName" class="tab-container">
+      <el-tab-pane
+        v-for="(tab, index) in tabList"
+        :key="`tab-${index}`"
+        :label="tab.text"
+        :name="tab.name"
       >
-      <el-collapse class="el-col el-col-24" v-if="item.name=='basic'&&column.setting&&column.setting.fold&&column.setting.folds" v-model="activeName" accordion>
-        <el-collapse-item :title="column.text" name="1">
-          <div class="el-col el-col-12" v-for="(column, index) in columns" v-if="column.setting&&column.setting.fold">
+        <el-row :gutter="20" class="tab-content">
+          <el-col
+            v-for="(column, colIndex) in getTabColumns(tab.name)"
+            :key="`tab-col-${colIndex}`"
+            :span="column.width || 12"
+            :class="column.alteration ? 'alterationRed' : ''"
+            class="form-item-col"
+            :style="getColumnStyle(column)"
+          >
             <component
               ref="editDialog"
-              :key="index"
               :disabled="column.disabled"
-              :is="
-                column.displayType != null
-                  ? 'KZ_' + column.displayType
-                  : 'KZ_TextBox'
-              "
+              :is="getComponentType(column)"
               :columns="columns"
               :column="column"
               :entity.sync="entity"
               :setting.sync="column.setting"
               :value="entity[column.property]"
-              @assignment="assignment"
               @change="onChangeEvent"
               @onSearch="onSearch"
-            >
-            </component>
-          </div>
-
-        </el-collapse-item>
-      </el-collapse>
-      <template v-else-if="column.setting&&column.setting.fold"></template>
-      <template
-        v-else-if="
-          (column.visible == undefined || column.visible != false) &&
-          (item.name == column.area || !column.area) &&
-          item.type != 'tab'
-        ">
-        <component
-          ref="editDialog"
-          :key="index"
-          :disabled="column.disabled"
-          :is="
-            column.displayType != null
-              ? 'KZ_' + column.displayType
-              : 'KZ_TextBox'
-          "
-          :columns="columns"
-          :column="column"
-          :entity.sync="entity"
-          :setting.sync="column.setting"
-          :value="entity[column.property]"
-          @assignment="assignment"
-          @change="onChangeEvent"
-          @clickDialog="clickDialog"
-          @onSearch="onSearch"
-        >
-        </component>
-      </template>
-
-      </el-col>
-    </template>
-    <el-tabs style="width: 100%; display: inline-block" v-model="activeName">
-      <el-tab-pane
-        v-for="(it, ix) in tabList"
-        :key="ix"
-        :label="it.text"
-        :name="it.text"
-      >
-        <el-col
-          v-for="(column, index) in columns"
-          :key="index"
-          v-if="
-            (column.visible == undefined || column.visible != false) &&
-            it.name == column.area
-          "
-          :span="column.width || 12"
-          :disabled="column.disabled"
-          :style="{
-            height:
-              column.displayType == 'Upload'
-                ? ''
-                : column.displayType == 'Editor'
-                ? '280px'
-                : '',
-            clear: column.wrap ? 'both' : '',
-          }"
-        >
-          <component
-            ref="editDialog"
-            :disabled="column.disabled"
-            :is="
-              column.displayType != null
-                ? 'KZ_' + column.displayType
-                : 'KZ_TextBox'
-            "
-            :columns="columns"
-            :column="column"
-            :entity.sync="entity"
-            :setting.sync="column.setting"
-            :value="entity[column.property]"
-            @change="onChangeEvent"
-            @onSearch="onSearch"
-          >
-          </component>
-        </el-col>
+            />
+          </el-col>
+        </el-row>
       </el-tab-pane>
     </el-tabs>
   </div>
@@ -137,13 +125,11 @@ import KZ_TextBox from "./textBox.vue";
 import KZ_Cascader from "./cascader.vue";
 import KZ_CheckBox from "./checkBox.vue";
 import KZ_TreeDownList from "./treeDownList";
-// import KZ_ColorPicker from "@components/customForm/colorPicker";
 import KZ_DatePicker from "./datePicker.vue";
 import KZ_Switch from "./switch.vue";
 import KZ_Upload from "./upload.vue";
 import KZ_UploadButton from "./uploadButton";
 import KZ_TextArea from "./textarea.vue";
-// import KZ_Editor from "@components/customForm/editor";
 import KZ_Lookup from "./lookup.vue";
 import KZ_Text from "./text.vue";
 import KZ_Radio from "./radio.vue";
@@ -155,13 +141,11 @@ import KZ_CustomButton from "./customButton.vue";
     KZ_TextBox,
     KZ_Cascader,
     KZ_CheckBox,
-    // KZ_ColorPicker,
     KZ_DatePicker,
     KZ_Switch,
     KZ_Upload,
     KZ_UploadButton,
     KZ_TextArea,
-    // KZ_Editor,
     KZ_Lookup,
     KZ_Text,
     KZ_Radio,
@@ -170,75 +154,227 @@ import KZ_CustomButton from "./customButton.vue";
   },
 })
 export default class FormColumns extends Vue {
-  @Prop()
-  entity;
-  @Prop()
-  rules;
-  @Prop()
-  columns;
+  @Prop() entity: any;
+  @Prop() rules: any;
+  @Prop() columns: any[];
   @Prop({
     type: Array,
-    default: function () {
-      return [
-        {
-          name: "basic",
-          visible: true,
-          icon: "ion-plus-round",
-          text: "",
-          type: "area",
-        },
-      ];
-    },
+    default: () => [{
+      name: "basic",
+      visible: true,
+      icon: "ion-plus-round",
+      text: "",
+      type: "area",
+    }],
   })
-  areaSetting;
-  private tabList = [];
-  private activeName = "";
-  private onChangeEvent(args) {
-    this.$emit("change", args);
+  areaSetting: any[];
+
+  private tabList: any[] = [];
+  private activeName: string[] = [];
+  private activeTabName: string = "";
+
+  // 计算属性：获取折叠的列
+  get foldColumns() {
+    return (this.columns || []).filter(col =>
+      col.setting && col.setting.fold && !col.setting.folds
+    );
+  }
+
+  // 计算属性：是否有折叠列
+  get hasFoldColumns() {
+    return this.foldColumns.length > 0;
+  }
+
+  // 获取区域内的列
+  getAreaColumns(areaName: string) {
+    return (this.columns || []).filter(col =>
+      col.area === areaName || (!col.area && areaName === 'basic')
+    );
   }
-  assignment(value, type) {
-    this.$emit("change", value, type);
+
+  // 获取Tab内的列
+  getTabColumns(tabName: string) {
+    return (this.columns || []).filter(col =>
+      (col.visible === undefined || col.visible !== false) &&
+      col.area === tabName
+    );
+  }
+
+  // 判断是否应该渲染列
+  shouldRenderColumn(column: any, item: any): boolean {
+    if (column.setting && column.setting.fold) return false;
+    if (column.visible === false) return false;
+    if (!item.name || column.area === item.name) return true;
+    if (!column.area && item.name === 'basic') return true;
+    return false;
   }
-  clickDialog(value){
-    this.$emit("clickDialog",value);
+
+  // 获取组件类型
+  getComponentType(column: any): string {
+    return column.displayType ? `KZ_${column.displayType}` : 'KZ_TextBox';
   }
-  onSearch(value) {
-    this.$emit("onSearch", value);
+
+  // 获取列样式
+  getColumnStyle(column: any): any {
+    const style: any = {};
+
+    if (column.wrap) {
+      style.clear = 'both';
+    }
+
+    // 高度设置
+    if (column.displayType === 'Upload') {
+      style.minHeight = '40px';
+    } else if (column.displayType === 'Editor') {
+      style.height = '280px';
+      style.minHeight = '280px';
+    }
+
+    // 响应式调整
+    style.marginBottom = '20px';
+
+    return style;
   }
+
+  @Emit('change')
+  private onChangeEvent(args: any) {
+    return args;
+  }
+
+  @Emit('change')
+  private assignment(value: any, type?: string) {
+    return { value, type };
+  }
+
+  @Emit('clickDialog')
+  private clickDialog(value: any) {
+    return value;
+  }
+
+  @Emit('onSearch')
+  private onSearch(value: any) {
+    return value;
+  }
+
   created() {
-    this.areaSetting &&
-      this.areaSetting.forEach((item) => {
-        if (item.type == "tab") {
-          this.tabList.push(item);
-          // console.log(this.tabList);
-          this.activeName = this.tabList[0].text;
-        }
-      });
+    this.initTabs();
+  }
+
+  private initTabs() {
+    if (!this.areaSetting) return;
+
+    this.tabList = this.areaSetting.filter(item => item.type === 'tab');
+
+    if (this.tabList.length > 0) {
+      this.activeTabName = this.tabList[0].name;
+    }
   }
 }
 </script>
-<style>
-.rowclass {
-  /* display: flex; */
-  /* flex-wrap: wrap; */
-}
-</style>
+
 <style scoped>
-.borderClass {
-  display: inline-block;
+.form-container {
   width: 100%;
+  box-sizing: border-box;
+}
+
+.area-title {
   font-weight: 600;
   line-height: 40px;
   border-bottom: solid 2px rgb(223, 228, 237);
-  margin-bottom: 15px;
+  margin-bottom: 20px;
+  margin-top: 10px;
+  font-size: 16px;
+}
+
+.area-content,
+.tab-content {
+  margin-bottom: 20px;
+}
+
+.form-item-col {
+  margin-bottom: 20px;
+  box-sizing: border-box;
+}
+
+.tab-container {
+  width: 100%;
+  margin-top: 10px;
+}
+
+/* 响应式调整 */
+@media screen and (max-width: 1200px) {
+  .form-item-col {
+    margin-bottom: 15px;
+  }
+}
+
+@media screen and (max-width: 992px) {
+  .form-item-col {
+    width: 100% !important;
+    max-width: 100% !important;
+    flex: 0 0 100% !important;
+    margin-bottom: 15px;
+  }
+
+  .area-title {
+    font-size: 15px;
+    line-height: 36px;
+    margin-bottom: 15px;
+  }
 }
-::v-deep.alterationRed .el-input__inner{
+
+@media screen and (max-width: 768px) {
+  .form-item-col {
+    margin-bottom: 12px;
+  }
+
+  .area-content,
+  .tab-content {
+    margin-bottom: 15px;
+  }
+}
+
+::v-deep.alterationRed .el-input__inner {
   border-color: red !important;
 }
-::v-deep.alterationRed .el-textarea__inner{
+
+::v-deep.alterationRed .el-textarea__inner {
   border-color: red !important;
 }
-::v-deep.alterationRed .el-upload{
+
+::v-deep.alterationRed .el-upload {
   border-color: red !important;
 }
+
+/* 确保所有组件容器正确显示 */
+::v-deep .el-form-item {
+  width: 100%;
+  margin-bottom: 0;
+}
+
+::v-deep .el-collapse-item__content {
+  padding-bottom: 0;
+}
+
+::v-deep .el-tabs__content {
+  overflow: visible;
+}
+
+::v-deep .el-row {
+  flex-wrap: wrap;
+}
+</style>
+
+<style>
+/* 全局样式，确保布局正确 */
+.el-col {
+  box-sizing: border-box;
+}
+
+.el-row {
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kz-ui-base",
-  "version": "1.0.130",
+  "version": "1.0.132",
   "description": "",
   "main": "index.js",
   "scripts": {