表单调整显示修改

src/components/table-form/modules/components.vue

@@ -1,13 +1,38 @@
 <template>
     <div
-        :id="id" class="hc-table-form-components-box" :data-key="keyname" :data-index="`${trindex || ''}_${tdindex || ''}`"
-        :data-x1="x1" :data-x2="x2" :data-y1="y1" :data-y2="y2" :data-tr="trindex" :data-td="tdindex" :data-name="name"
-        :data-text="placeholder" :data-type="typeName" :data-rows="rows" :data-format="valueFormat || format" :data-weighing="weighing"
-        :data-label="label" :data-value="value" :data-src="src" :data-val="val" :data-contractid="contractid" :data-pkeyid="pkeyid"
-        :data-objs="objsData" :data-multiple="multiple" :data-range="rangeSeparator" :data-def="deftext" :data-max="maxlength"
+        :id="id"
+        class="hc-table-form-components-box"
+        :data-key="keyname"
+        :data-index="`${trindex || ''}_${tdindex || ''}`"
+        :data-x1="x1"
+        :data-x2="x2"
+        :data-y1="y1"
+        :data-y2="y2"
+        :data-tr="trindex"
+        :data-td="tdindex"
+        :data-name="name"
+        :data-text="placeholder"
+        :data-type="typeName"
+        :data-rows="rows"
+        :data-format="valueFormat || format"
+        :data-weighing="weighing"
+        :data-label="label"
+        :data-value="value"
+        :data-src="src"
+        :data-val="val"
+        :data-contractid="contractid"
+        :data-pkeyid="pkeyid"
+        :data-objs="objsData"
+        :data-multiple="multiple"
+        :data-range="rangeSeparator"
+        :data-def="deftext"
+        :data-max="maxlength"
         :data-tip="tip"
     >
-        <span class="name-placeholder">{{ name || placeholder }}</span>
+        <!-- <span class="name-placeholder">{{ name || placeholder }}</span> -->
+        <span class="name-placeholder">{{
+            isShowName ? placeholder : name
+        }}</span>
         <i class="i-iconoir-warning-triangle-solid warning-icon" />
         <div v-if="isSlots" class="slot-content">
             <slot />
@@ -16,8 +41,10 @@
 </template>
 
 <script setup>
-import { onMounted, ref, useSlots } from 'vue'
-import { isNullES } from 'js-fast-way'
+import { onMounted, ref, useSlots } from "vue";
+import { isNullES } from "js-fast-way";
+import { useAppStore } from "~src/store";
+const store = useAppStore();
 
 const props = defineProps({
     type: [String, Number],
@@ -46,54 +73,54 @@ const props = defineProps({
     deftext: [String, Number],
     maxlength: [String, Number],
     tip: [String, Number],
-})
-
-const objsData = ref('')
+});
 
+const objsData = ref("");
+const isShowName = ref(store.getIsShowName);
 //渲染完成
-onMounted(()=> {
+onMounted(() => {
     if (props.multiple) {
-        typeName.value = 'multiple_select'
+        typeName.value = "multiple_select";
     } else {
-        typeName.value = props.type
+        typeName.value = props.type;
     }
     if (!isNullES(props.objs)) {
-        objsData.value = JSON.stringify(props.objs)
+        objsData.value = JSON.stringify(props.objs);
     }
-    matchingType()
-})
+    matchingType();
+});
 
 //匹配组件类型
-const name = ref('')
-const typeName = ref('')
+const name = ref("");
+const typeName = ref("");
 const typeObj = {
-    text: '输入框',
-    select: '下拉框',
-    multiple_select: '多选下拉框',
-    select_option: '下拉框选项',
-    textarea: '多行输入框',
-    checkbox_group: '多选框组',
-    form_checkbox: '多选框组合',
-    checkbox: '多选框',
-    radio_group: '单选框组',
-    radio: '单选框',
-    date: '日期框',
-    time: '时间框',
-    datetime: '日期时间框',
-    datetimerange: '日期时间范围框',
-    dap_site_data: '远程搜索框',
-    strength_search: '设计强度搜索框',
-    upload: '图片展示以及上传框',
-    echart: '图表组件',
-}
+    text: "输入框",
+    select: "下拉框",
+    multiple_select: "多选下拉框",
+    select_option: "下拉框选项",
+    textarea: "多行输入框",
+    checkbox_group: "多选框组",
+    form_checkbox: "多选框组合",
+    checkbox: "多选框",
+    radio_group: "单选框组",
+    radio: "单选框",
+    date: "日期框",
+    time: "时间框",
+    datetime: "日期时间框",
+    datetimerange: "日期时间范围框",
+    dap_site_data: "远程搜索框",
+    strength_search: "设计强度搜索框",
+    upload: "图片展示以及上传框",
+    echart: "图表组件",
+};
 const matchingType = () => {
-    if (isNullES(typeName.value)) return
-    name.value = typeObj[typeName.value]
-}
+    if (isNullES(typeName.value)) return;
+    name.value = typeObj[typeName.value];
+};
 
 //判断插槽是否有内容
-const slots = useSlots()
-const isSlots = !!slots.default
+const slots = useSlots();
+const isSlots = !!slots.default;
 </script>
 
 <style scoped lang="scss">

src/store/index.js

@@ -1,131 +1,147 @@
-import { defineStore } from 'pinia'
-import pinia from '~src/store/init'
-import website from '~src/config/index'
-import logoIcon from '~src/assets/logo/icon.png'
-import { clearStoreAll } from 'hc-vue3-ui'
-import { getStoreValue, setStoreValue } from '~src/utils/storage'
-import { removeRefreshToken, removeToken, setRefreshToken, setToken } from '~src/api/auth'
+import { defineStore } from "pinia";
+import pinia from "~src/store/init";
+import website from "~src/config/index";
+import logoIcon from "~src/assets/logo/icon.png";
+import { clearStoreAll } from "hc-vue3-ui";
+import { getStoreValue, setStoreValue } from "~src/utils/storage";
+import {
+    removeRefreshToken,
+    removeToken,
+    setRefreshToken,
+    setToken,
+} from "~src/api/auth";
 
-export const useAppStore = defineStore('main', {
+export const useAppStore = defineStore("main", {
     state: () => ({
         //系统信息
-        title: getStoreValue('title') || website.title,
-        logoIcon: getStoreValue('logoIcon') || logoIcon,
-        logoName: getStoreValue('logoName') || website.name,
+        title: getStoreValue("title") || website.title,
+        logoIcon: getStoreValue("logoIcon") || logoIcon,
+        logoName: getStoreValue("logoName") || website.name,
         //主题信息
-        theme: getStoreValue('theme') || website.theme,
-        color: getStoreValue('color') || website.color,
+        theme: getStoreValue("theme") || website.theme,
+        color: getStoreValue("color") || website.color,
         //用户信息
-        token: getStoreValue('token') || '',
-        refreshToken: getStoreValue('refreshToken') || '',
-        tenantId: getStoreValue('tenantId') || '',
-        userInfo: getStoreValue('userInfo') || {},
+        token: getStoreValue("token") || "",
+        refreshToken: getStoreValue("refreshToken") || "",
+        tenantId: getStoreValue("tenantId") || "",
+        userInfo: getStoreValue("userInfo") || {},
         //菜单信息
-        menus: getStoreValue('menus') || [],
-        buttons: getStoreValue('buttons') || {},
+        menus: getStoreValue("menus") || [],
+        buttons: getStoreValue("buttons") || {},
         //其他配置信息
-        isCollapse: getStoreValue('isCollapse') || false, //菜单折叠
+        isCollapse: getStoreValue("isCollapse") || false, //菜单折叠
+        //表单显示配置
+        isShowName: getStoreValue("isShowName") || true, //表单显示名称
     }),
     getters: {
         //系统信息
-        getTitle: state => state.title,
-        getLogoIcon: state => state.logoIcon,
-        getLogoName: state => state.logoName,
+        getTitle: (state) => state.title,
+        getLogoIcon: (state) => state.logoIcon,
+        getLogoName: (state) => state.logoName,
         //主题信息
-        getTheme: state => state.theme,
-        getColor: state => state.color,
+        getTheme: (state) => state.theme,
+        getColor: (state) => state.color,
         //用户信息
-        getToken: state => state.token,
-        getRefreshToken: state => state.refreshToken,
-        getTenantId: state => state.tenantId,
-        getUserInfo: state => state.userInfo,
+        getToken: (state) => state.token,
+        getRefreshToken: (state) => state.refreshToken,
+        getTenantId: (state) => state.tenantId,
+        getUserInfo: (state) => state.userInfo,
         //菜单信息
-        getMenus: state => state.menus,
-        getButtons: state => state.buttons,
+        getMenus: (state) => state.menus,
+        getButtons: (state) => state.buttons,
         //其他配置信息
-        getCollapse: state => state.isCollapse,
+        getCollapse: (state) => state.isCollapse,
+        //表单显示配置
+        getIsShowName: (state) => state.isShowName,
     },
     actions: {
         //系统信息
         setTitle(value) {
-            this.title = value
-            setStoreValue('title', value)
+            this.title = value;
+            setStoreValue("title", value);
         },
         setLogoIcon(value) {
-            this.logoIcon = value
-            setStoreValue('logoIcon', value)
+            this.logoIcon = value;
+            setStoreValue("logoIcon", value);
         },
         setLogoName(value) {
-            this.logoName = value
-            setStoreValue('logoName', value)
+            this.logoName = value;
+            setStoreValue("logoName", value);
         },
         //主题信息
         setTheme(value) {
-            this.theme = value
-            setStoreValue('theme', value)
+            this.theme = value;
+            setStoreValue("theme", value);
         },
         setColor(value) {
-            this.color = value
-            setStoreValue('color', value)
+            this.color = value;
+            setStoreValue("color", value);
         },
         //用户信息
         setTokenVal(value) {
-            this.token = value
-            setToken(value)
-            setStoreValue('token', value)
+            this.token = value;
+            setToken(value);
+            setStoreValue("token", value);
         },
         setRefreshTokenVal(value) {
-            this.refreshToken = value
-            setRefreshToken(value)
-            setStoreValue('refreshToken', value)
+            this.refreshToken = value;
+            setRefreshToken(value);
+            setStoreValue("refreshToken", value);
         },
         setTenantId(value) {
-            this.tenantId = value
-            setStoreValue('tenantId', value)
+            this.tenantId = value;
+            setStoreValue("tenantId", value);
         },
         setUserInfo(value) {
-            this.userInfo = value
-            setStoreValue('userInfo', value)
+            this.userInfo = value;
+            setStoreValue("userInfo", value);
         },
         //菜单信息
         setMenus(value) {
-            this.menus = value
-            setStoreValue('menus', value)
+            this.menus = value;
+            setStoreValue("menus", value);
         },
         setButtons(value) {
-            this.buttons = value
-            setStoreValue('buttons', value)
+            this.buttons = value;
+            setStoreValue("buttons", value);
         },
         getButtonsVal(value) {
-            return this.buttons[value] || false
+            return this.buttons[value] || false;
         },
         //其他配置信息
-        setCollapse(value) { //菜单折叠
-            this.isCollapse = value
-            setStoreValue('isCollapse', value)
+        setCollapse(value) {
+            //菜单折叠
+            this.isCollapse = value;
+            setStoreValue("isCollapse", value);
+        },
+        //表单显示
+        setIsShowName(value) {
+            this.isShowName = value;
+            setStoreValue("isShowName", value);
         },
         //清除缓存和token
         clearStoreData() {
-            this.title = null
-            this.logoIcon = null
-            this.logoName = null
-            this.theme = website.theme
-            this.color = website.color
-            this.token = null
-            this.refreshToken = null
-            this.tenantId = null
-            this.userInfo = null
-            this.menus = null
-            this.buttons = null
-            this.isCollapse = false
+            this.title = null;
+            this.logoIcon = null;
+            this.logoName = null;
+            this.theme = website.theme;
+            this.color = website.color;
+            this.token = null;
+            this.refreshToken = null;
+            this.tenantId = null;
+            this.userInfo = null;
+            this.menus = null;
+            this.buttons = null;
+            this.isCollapse = false;
+            this.isShowName = true;
             //清除缓存
-            clearStoreAll()
-            removeToken()
-            removeRefreshToken()
+            clearStoreAll();
+            removeToken();
+            removeRefreshToken();
         },
     },
-})
+});
 
 export default function useUserStoreWidthOut() {
-    return useAppStore(pinia)
+    return useAppStore(pinia);
 }

src/views/project/list/adjust-excel.vue

@@ -72,6 +72,8 @@ import HcSetDefault from "./adjust-excel/set-default.vue";
 import HcSetPrompt from "./adjust-excel/set-prompt.vue";
 import excelApi from "~api/exctab/exceltab";
 
+import { useAppStore } from "~src/store";
+const store = useAppStore();
 const props = defineProps({
     info: {
         type: Object,
@@ -107,6 +109,7 @@ watch(
 //监听显示
 watch(isShow, (val) => {
     if (val) getDataApi();
+    store.setIsShowName(false);
 });
 
 //页面分割

src/views/project/list/edit-element.vue

@@ -237,7 +237,8 @@ import {
 } from "js-fast-way";
 import { getDictionaryData } from "~uti/tools";
 import excelApi from "~api/exctab/exceltab";
-
+import { useAppStore } from "~src/store";
+const store = useAppStore();
 const props = defineProps({
     info: {
         type: Object,
@@ -278,6 +279,7 @@ watch(
 //监听显示
 watch(isShow, (val) => {
     if (val) getDataApi();
+    store.setIsShowName(true);
 });
 
 //页面分割