vue2-client 1.15.26-1 → 1.15.26

package/src/base-client/components/TreeList/TreeNode.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="tree-node">
+    <div class="node-content" @click="handleClick">
+      <span v-if="hasChildren" class="toggle-icon">
+        {{ node.expanded ? '-' : '+' }}
+      </span>
+      <span class="node-title">{{ node.title }}</span>
+    </div>
+    <div v-if="hasChildren && node.expanded" class="node-children">
+      <tree-node
+        v-for="child in node.children"
+        :key="child.id"
+        :node="child"
+        @toggle="$emit('toggle', $event)"
+        :level="level + 1"/>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TreeNode',
+  props: {
+    node: {
+      type: Object,
+      required: true
+    },
+    level: {
+      type: Number,
+      default: 0
+    }
+  },
+  computed: {
+    hasChildren() {
+      return this.node.children && this.node.children.length > 0
+    }
+  },
+  methods: {
+    handleClick() {
+      if (this.hasChildren) {
+        this.$emit('toggle', this.node)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tree-node {
+  margin: 2px 0;
+}
+
+.node-content {
+  display: flex;
+  align-items: center;
+  padding: 4px 0;
+  user-select: none;
+}
+
+.toggle-icon {
+  width: 16px;
+  text-align: center;
+  font-size: 14px;
+  color: #666;
+  margin-right: 4px;
+  cursor: pointer;
+}
+
+.node-title {
+  flex: 1;
+  cursor: default;
+}
+
+.node-content:hover {
+  background-color: #f5f5f5;
+}
+
+.node-children {
+  padding-left: 20px;
+}
+</style> 

package/src/base-client/components/common/XCardSet/XTiltle.vue

@@ -0,0 +1,191 @@
+<template>
+  <a-row
+    class="title_box"
+    :style="{backgroundColor: requiredParameters.backgroundColor,height:requiredParameters.height}"
+    type="flex"
+    v-model="requiredParameters">
+    <a-col class="title_col_left" :flex="3">
+      <div class="title_img_box">
+        <img src="../img/header10086.png" class="title_img" alt="">
+      </div>
+      <div class="title_name">{{ requiredParameters.title }}</div>
+    </a-col>
+    <a-col class="title_col_right" id="titleSelect" :flex="3" style="padding-right: 3%" v-model="dateData">
+      <div class="title_date_box">
+        <div class="title_data">{{ dateData.date }}</div>
+        <div class="title_week">{{ dateData.dayOfWeek }}</div>
+      </div>
+      <div class="title_time">{{ dateData.time }}</div>
+      <div style="font-size: x-large;margin-left: 1%">|</div>
+      <div class="title_refresh" @click="refreshTitle"><a-icon type="undo" style="font-size: x-large;"/></div>
+      <div class="title_refresh_box">
+        <div class="title_refresh_time">{{ dateData.refreshTime }}</div>
+        <div class="latest_update_time">最新更新时间</div>
+      </div>
+    </a-col>
+  </a-row>
+</template>
+
+<script>
+
+export default {
+  name: 'TitleComponent',
+  components: {},
+  data () {
+    return {
+      dateData: {
+        date: '',
+        dayOfWeek: '',
+        time: '',
+        refreshTime: ''
+      },
+      timer: null
+    }
+  },
+  props: {
+    requiredParameters: {
+      type: Object,
+      default: () => ({
+        title: '',
+        backgroundColor: '',
+        height: ''
+      }),
+    }
+  },
+  created () {
+    this.updateDateData()
+    this.startTimer()
+  },
+  beforeDestroy () {
+    this.stopTimer()
+  },
+  methods: {
+    // 刷新页面
+    refreshTitle () {
+      this.$forceUpdate()
+      const now = new Date()
+      this.dateData.refreshTime = now.toLocaleTimeString()
+      this.$emit('refreshTitle')
+    },
+    updateDateData () {
+      const now = new Date()
+      const options = { weekday: 'long' }
+      this.dateData.date = this.formatDate(now)
+      this.dateData.time = this.formatTime(now)
+      this.dateData.dayOfWeek = now.toLocaleDateString(undefined, options)
+      this.dateData.refreshTime = now.toLocaleTimeString()
+    },
+    formatDate (date) {
+      const month = date.getMonth() + 1
+      const day = date.getDate()
+      return `${month}月${day}日`
+    },
+    formatTime (date) {
+      const hours = String(date.getHours()).padStart(2, '0')
+      const minutes = String(date.getMinutes()).padStart(2, '0')
+      return `${hours}:${minutes}`
+    },
+    startTimer () {
+      this.timer = setInterval(() => {
+        const now = new Date()
+        this.dateData.time = this.formatTime(now)
+      }, 10000) // 每秒更新一次
+    },
+    stopTimer () {
+      if (this.timer) {
+        clearInterval(this.timer)
+        this.timer = null
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.title_box {
+  width: 100%;
+  min-height:42px;
+}
+.title_col_left {
+  height: 100%;
+  color: white;
+  display: flex;
+  align-content: center;
+  align-items: center;
+}
+.title_col_right {
+  height: 100%;
+  color: white;
+  display: flex;
+  align-content: center;
+  align-items: center;
+  justify-content: flex-end;
+}
+.title_img_box {
+  height: 80%;
+  width: auto;
+  margin-left: 1%;
+  border-radius: 50%;
+  background-color: #35baf6;
+}
+.title_img{
+  width: 100%;
+  height: 100%;
+}
+.title_name {
+  font-size: medium !important;
+  font-weight: bold;
+  margin-left: 1%;
+}
+.title_date_box{
+  width: 20%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.title_data{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: smaller;
+}
+.title_week{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: smaller;
+}
+.title_time{
+  font-size: x-large;
+}
+.title_refresh{
+  margin-left: 1%;
+  height: 100%;
+  align-content: center;
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  width: 7%;
+  justify-content: center;
+  min-width: 31px;
+}
+.title_refresh:hover{
+  background-color: rgb(31, 138, 137);
+}
+.title_refresh:active{
+  background-color: rgb(26, 129, 128);
+}
+.title_refresh_box{
+  margin-right: 1%;
+}
+.latest_update_time{
+  font-size: x-small;
+}
+.title_refresh_time{
+  display: flex;
+  font-size: x-small;
+  align-content: center;
+  justify-content: center;
+}
+</style>

package/src/base-client/components/common/XDescriptions/XDescriptions.vue

@@ -1,174 +1,174 @@
-<template>
-  <div class="row">
-    <div class="content">
-      <a-skeleton :loading="loading" :paragraph="{ rows: 4 }" />
-      <div v-show="!loading">
-        <template v-if="!loadError">
-          <a-descriptions v-if="realData" :column="isMobile ? 1 : column" size="small" :title="title">
-            <a-descriptions-item
-              v-for="(value, key) in realData"
-              :key="key"
-              :label="key">
-              {{ formatText(value) }}
-            </a-descriptions-item>
-          </a-descriptions>
-        </template>
-        <template v-else>
-          <a-empty>
-            <span slot="description"> 页面配置不存在，请联系系统管理员 </span>
-          </a-empty>
-        </template>
-      </div>
-    </div>
-    <div class="extra" v-if="extraShow">
-      <slot name="addonAfter"/>
-    </div>
-  </div>
-</template>
-<script>
-
-import { mapState } from 'vuex'
-import { getRealKeyData } from '@vue2-client/utils/formatter'
-import { getConfigByName } from '@vue2-client/services/api/common'
-
-export default {
-  name: 'XDescriptions',
-  components: {
-  },
-  props: {
-    // 标题
-    title: {
-      type: String,
-      required: true
-    },
-    // 内容
-    content: {
-      type: Object,
-      required: true
-    },
-    // 模型名
-    model: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    // 配置名称
-    configName: {
-      type: String,
-      required: true
-    },
-    // 配置所属命名空间
-    serviceName: {
-      type: String,
-      default: undefined
-    },
-    env: {
-      type: String,
-      default: 'prod'
-    },
-    // 每列显示数量
-    column: {
-      type: Number,
-      default: 2
-    },
-    // 每列显示数量
-    getRealData: {
-      type: Boolean,
-      default: false
-    },
-    // 是否展示插槽
-    extraShow: {
-      type: Boolean,
-      default: true
-    }
-  },
-  created () {
-    this.initConfig()
-  },
-  data () {
-    return {
-      // 加载状态
-      loading: false,
-      loadError: false,
-      realData: undefined
-    }
-  },
-  computed: {
-    ...mapState('setting', { isMobile: 'isMobile' })
-  },
-  methods: {
-    initConfig () {
-      this.loading = true
-      this.loadError = false
-      if (this.configName) {
-        this.getConfig()
-      } else {
-        this.loading = false
-        this.loadError = true
-      }
-    },
-    getConfig () {
-      getConfigByName(this.configName, this.serviceName, (res) => {
-        const mapIndex = {}
-        const result = {}
-        if (res.formJson) {
-          res.formJson.filter(item => {
-            const model = item.model
-            return model.indexOf(this.model) > 0
-          })[0].groupItems.forEach(item => {
-            mapIndex[item.model.substring(item.model.indexOf('_') + 1)] = item.name
-          })
-          for (const key of Object.keys(this.content)) {
-            const name = mapIndex[key]
-            if (name) {
-              result[name] = this.content[key]
-            } else {
-              result[key] = this.content[key]
-            }
-          }
-        } else if (res.column) {
-          // [{label:'标签1',filed:'字段1'}]
-          let content = {}
-          if (this.getRealData) {
-            content = getRealKeyData(this.content)
-          } else {
-            content = this.content
-          }
-          if (typeof content === 'string') {
-            content = JSON.parse(content)
-          }
-          res.column.forEach(item => {
-            result[item.label] = content[item.filed]
-          })
-        }
-        this.realData = result
-        this.loading = false
-      }, this.env === 'dev')
-    },
-    // 文字格式化
-    formatText (value) {
-      return value ?? '--'
-    }
-  }
-}
-</script>
-<style>
-.row {
-  display: flex;
-
-  .content {
-    -webkit-box-flex: 1;
-    flex: auto;
-    -ms-flex: auto;
-  }
-
-  .extra {
-    flex: 0 1 auto;
-    -webkit-box-flex: 0;
-    -ms-flex: 0 1 auto;
-    min-width: 242px;
-    margin-left: 88px;
-    text-align: right;
-  }
-}
-</style>
+<template>
+  <div class="row">
+    <div class="content">
+      <a-skeleton :loading="loading" :paragraph="{ rows: 4 }" />
+      <div v-show="!loading">
+        <template v-if="!loadError">
+          <a-descriptions v-if="realData" :column="isMobile ? 1 : column" size="small" :title="title">
+            <a-descriptions-item
+              v-for="(value, key) in realData"
+              :key="key"
+              :label="key">
+              {{ formatText(value) }}
+            </a-descriptions-item>
+          </a-descriptions>
+        </template>
+        <template v-else>
+          <a-empty>
+            <span slot="description"> 页面配置不存在，请联系系统管理员 </span>
+          </a-empty>
+        </template>
+      </div>
+    </div>
+    <div class="extra" v-if="extraShow">
+      <slot name="addonAfter"/>
+    </div>
+  </div>
+</template>
+<script>
+
+import { mapState } from 'vuex'
+import { getRealKeyData } from '@vue2-client/utils/formatter'
+import { getConfigByName } from '@vue2-client/services/api/common'
+
+export default {
+  name: 'XDescriptions',
+  components: {
+  },
+  props: {
+    // 标题
+    title: {
+      type: String,
+      required: true
+    },
+    // 内容
+    content: {
+      type: Object,
+      required: true
+    },
+    // 模型名
+    model: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    // 配置名称
+    configName: {
+      type: String,
+      required: true
+    },
+    // 配置所属命名空间
+    serviceName: {
+      type: String,
+      default: undefined
+    },
+    env: {
+      type: String,
+      default: 'prod'
+    },
+    // 每列显示数量
+    column: {
+      type: Number,
+      default: 2
+    },
+    // 每列显示数量
+    getRealData: {
+      type: Boolean,
+      default: false
+    },
+    // 是否展示插槽
+    extraShow: {
+      type: Boolean,
+      default: true
+    }
+  },
+  created () {
+    this.initConfig()
+  },
+  data () {
+    return {
+      // 加载状态
+      loading: false,
+      loadError: false,
+      realData: undefined
+    }
+  },
+  computed: {
+    ...mapState('setting', { isMobile: 'isMobile' })
+  },
+  methods: {
+    initConfig () {
+      this.loading = true
+      this.loadError = false
+      if (this.configName) {
+        this.getConfig()
+      } else {
+        this.loading = false
+        this.loadError = true
+      }
+    },
+    getConfig () {
+      getConfigByName(this.configName, this.serviceName, (res) => {
+        const mapIndex = {}
+        const result = {}
+        if (res.formJson) {
+          res.formJson.filter(item => {
+            const model = item.model
+            return model.indexOf(this.model) > 0
+          })[0].groupItems.forEach(item => {
+            mapIndex[item.model.substring(item.model.indexOf('_') + 1)] = item.name
+          })
+          for (const key of Object.keys(this.content)) {
+            const name = mapIndex[key]
+            if (name) {
+              result[name] = this.content[key]
+            } else {
+              result[key] = this.content[key]
+            }
+          }
+        } else if (res.column) {
+          // [{label:'标签1',filed:'字段1'}]
+          let content = {}
+          if (this.getRealData) {
+            content = getRealKeyData(this.content)
+          } else {
+            content = this.content
+          }
+          if (typeof content === 'string') {
+            content = JSON.parse(content)
+          }
+          res.column.forEach(item => {
+            result[item.label] = content[item.filed]
+          })
+        }
+        this.realData = result
+        this.loading = false
+      }, this.env === 'dev')
+    },
+    // 文字格式化
+    formatText (value) {
+      return value ?? '--'
+    }
+  }
+}
+</script>
+<style>
+.row {
+  display: flex;
+
+  .content {
+    -webkit-box-flex: 1;
+    flex: auto;
+    -ms-flex: auto;
+  }
+
+  .extra {
+    flex: 0 1 auto;
+    -webkit-box-flex: 0;
+    -ms-flex: 0 1 auto;
+    min-width: 242px;
+    margin-left: 88px;
+    text-align: right;
+  }
+}
+</style>