vue2-client 1.16.23 → 1.16.25

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

@@ -1,238 +1,238 @@
-<template>
-  <a-drawer
-    :visible="visible"
-    :width="isMobile ? screenWidth : screenWidth * 0.85"
-    placement="right"
-    :title="mainTitle"
-    @close="onClose"
-  >
-    <a-spin :spinning="loadDetails">
-      <a-row type="flex">
-        <a-col :span="layoutStyle.leftCol">
-          <!-- 扩展区域 -->
-          <slot name="leftContent" :details="details"/>
-        </a-col>
-        <a-col :span="layoutStyle.rightCol">
-          <a-page-header :title="title">
-            <!-- 详情区域 -->
-            <div class="row">
-              <div class="content">
-                <a-descriptions :column="desColumn">
-                  <slot name="descriptionsContent" :details="details"/>
-                </a-descriptions>
-              </div>
-              <!-- 状态区域 -->
-              <div class="extra">
-                <slot name="statusContent" :details="details"/>
-                <!-- example is: -->
-                <!-- <a-row class="status-list">-->
-                <!--   <a-col :sm="24" :xs="12">-->
-                <!--   </a-col>-->
-                <!-- </a-row>-->
-                <!-- or many is: -->
-                <!-- <a-row class="status-list">-->
-                <!--   <a-col :sm="24" :xs="12">-->
-                <!--   </a-col>-->
-                <!-- </a-row>-->
-                <!-- <p></p>-->
-                <!-- <a-row class="status-list">-->
-                <!--   <a-col :sm="24" :xs="12">-->
-                <!--   </a-col>-->
-                <!-- </a-row>-->
-              </div>
-            </div>
-            <!-- 操作区域 -->
-            <template #extra>
-              <a-button-group style="margin-right: 4px;" v-show="buttonState.refresh">
-                <a-button :loading="loadDetails" type="dashed" @click="initView('1')">刷新</a-button>
-              </a-button-group>
-              <a-button-group style="margin-right: 4px;">
-                <slot name="actionContent" :details="details"/>
-              </a-button-group>
-            </template>
-            <!-- 扩展区域 -->
-            <slot name="extraContent" :details="details"/>
-            <!-- 页签区域 -->
-            <a-tabs default-active-key="1">
-              <slot name="actionTabs" :details="details"/>
-            </a-tabs>
-          </a-page-header>
-        </a-col>
-      </a-row>
-    </a-spin>
-  </a-drawer>
-</template>
-
-<script>
-import { formatDate } from '@vue2-client/utils/util'
-import { mapState } from 'vuex'
-import XBadge from '@vue2-client/base-client/components/common/XBadge/XBadge'
-import { post } from 'vue2-client/src/services/api/restTools'
-
-export default {
-  name: 'XDetailsView',
-  components: {
-    XBadge
-  },
-  data () {
-    return {
-      // 页面宽度
-      screenWidth: document.documentElement.clientWidth,
-      // 数据详情
-      details: {},
-      // 详情加载
-      loadDetails: false
-    }
-  },
-  mounted () {
-    this.initView()
-  },
-  computed: {
-    ...mapState('account', { currUser: 'user' }),
-    ...mapState('setting', ['isMobile'])
-  },
-  props: {
-    id: {
-      type: [String, Number],
-      required: false
-    },
-    mainTitle: {
-      type: String,
-      required: true
-    },
-    title: {
-      type: String,
-      required: true
-    },
-    visible: {
-      type: Boolean,
-      default: false
-    },
-    api: {
-      type: String,
-      required: false
-    },
-    desColumn: {
-      type: Number,
-      required: false,
-      default: 3
-    },
-    // 按钮状态
-    buttonState: {
-      type: Object,
-      default: () => {
-        return {
-          // 刷新按钮显示状态
-          refresh: true
-        }
-      }
-    },
-    // 详情内容样式
-    layoutStyle: {
-      type: Object,
-      default: () => {
-        return {
-          leftCol: 0, // 侧边占比
-          rightCol: 24, // 内容区域占比
-        }
-      }
-    }
-  },
-  methods: {
-    // 初始化组件
-    initView () {
-      this.getDetails()
-    },
-    // 关闭抽屉时回调
-    onClose () {
-      this.$emit('update:visible', false)
-    },
-    // 获取详情信息
-    getDetails () {
-      if (this.api && this.id) {
-        this.loadDetails = true
-        post(this.api, {
-          id: this.id
-        }).then(res => {
-          this.$emit('searchData', res)
-          this.details = res
-        }, err => {
-          console.error(err)
-        }).finally(() => {
-          this.loadDetails = false
-        })
-      }
-    },
-    // 日期格式化
-    format (date, format) {
-      return formatDate(date, format)
-    }
-  },
-  watch: {
-    'visible' (val) {
-      if (val) {
-        this.initView()
-      }
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.detail-layout {
-  margin-left: 44px;
-}
-.text {
-  color: rgba(0, 0, 0, .45);
-}
-
-.heading {
-  color: rgba(0, 0, 0, .85);
-  font-size: 20px;
-}
-
-.no-data {
-  color: rgba(0, 0, 0, .25);
-  text-align: center;
-  line-height: 64px;
-  font-size: 16px;
-
-  i {
-    font-size: 24px;
-    margin-right: 16px;
-    position: relative;
-    top: 3px;
-  }
-}
-
-.mobile {
-  .detail-layout {
-    margin-left: unset;
-  }
-  .text {
-
-  }
-  .status-list {
-    text-align: left;
-  }
-}
-
-.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>
+  <a-drawer
+    :visible="visible"
+    :width="isMobile ? screenWidth : screenWidth * 0.85"
+    placement="right"
+    :title="mainTitle"
+    @close="onClose"
+  >
+    <a-spin :spinning="loadDetails">
+      <a-row type="flex">
+        <a-col :span="layoutStyle.leftCol">
+          <!-- 扩展区域 -->
+          <slot name="leftContent" :details="details"/>
+        </a-col>
+        <a-col :span="layoutStyle.rightCol">
+          <a-page-header :title="title">
+            <!-- 详情区域 -->
+            <div class="row">
+              <div class="content">
+                <a-descriptions :column="desColumn">
+                  <slot name="descriptionsContent" :details="details"/>
+                </a-descriptions>
+              </div>
+              <!-- 状态区域 -->
+              <div class="extra">
+                <slot name="statusContent" :details="details"/>
+                <!-- example is: -->
+                <!-- <a-row class="status-list">-->
+                <!--   <a-col :sm="24" :xs="12">-->
+                <!--   </a-col>-->
+                <!-- </a-row>-->
+                <!-- or many is: -->
+                <!-- <a-row class="status-list">-->
+                <!--   <a-col :sm="24" :xs="12">-->
+                <!--   </a-col>-->
+                <!-- </a-row>-->
+                <!-- <p></p>-->
+                <!-- <a-row class="status-list">-->
+                <!--   <a-col :sm="24" :xs="12">-->
+                <!--   </a-col>-->
+                <!-- </a-row>-->
+              </div>
+            </div>
+            <!-- 操作区域 -->
+            <template #extra>
+              <a-button-group style="margin-right: 4px;" v-show="buttonState.refresh">
+                <a-button :loading="loadDetails" type="dashed" @click="initView('1')">刷新</a-button>
+              </a-button-group>
+              <a-button-group style="margin-right: 4px;">
+                <slot name="actionContent" :details="details"/>
+              </a-button-group>
+            </template>
+            <!-- 扩展区域 -->
+            <slot name="extraContent" :details="details"/>
+            <!-- 页签区域 -->
+            <a-tabs default-active-key="1">
+              <slot name="actionTabs" :details="details"/>
+            </a-tabs>
+          </a-page-header>
+        </a-col>
+      </a-row>
+    </a-spin>
+  </a-drawer>
+</template>
+
+<script>
+import { formatDate } from '@vue2-client/utils/util'
+import { mapState } from 'vuex'
+import XBadge from '@vue2-client/base-client/components/common/XBadge/XBadge'
+import { post } from 'vue2-client/src/services/api/restTools'
+
+export default {
+  name: 'XDetailsView',
+  components: {
+    XBadge
+  },
+  data () {
+    return {
+      // 页面宽度
+      screenWidth: document.documentElement.clientWidth,
+      // 数据详情
+      details: {},
+      // 详情加载
+      loadDetails: false
+    }
+  },
+  mounted () {
+    this.initView()
+  },
+  computed: {
+    ...mapState('account', { currUser: 'user' }),
+    ...mapState('setting', ['isMobile'])
+  },
+  props: {
+    id: {
+      type: [String, Number],
+      required: false
+    },
+    mainTitle: {
+      type: String,
+      required: true
+    },
+    title: {
+      type: String,
+      required: true
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    api: {
+      type: String,
+      required: false
+    },
+    desColumn: {
+      type: Number,
+      required: false,
+      default: 3
+    },
+    // 按钮状态
+    buttonState: {
+      type: Object,
+      default: () => {
+        return {
+          // 刷新按钮显示状态
+          refresh: true
+        }
+      }
+    },
+    // 详情内容样式
+    layoutStyle: {
+      type: Object,
+      default: () => {
+        return {
+          leftCol: 0, // 侧边占比
+          rightCol: 24, // 内容区域占比
+        }
+      }
+    }
+  },
+  methods: {
+    // 初始化组件
+    initView () {
+      this.getDetails()
+    },
+    // 关闭抽屉时回调
+    onClose () {
+      this.$emit('update:visible', false)
+    },
+    // 获取详情信息
+    getDetails () {
+      if (this.api && this.id) {
+        this.loadDetails = true
+        post(this.api, {
+          id: this.id
+        }).then(res => {
+          this.$emit('searchData', res)
+          this.details = res
+        }, err => {
+          console.error(err)
+        }).finally(() => {
+          this.loadDetails = false
+        })
+      }
+    },
+    // 日期格式化
+    format (date, format) {
+      return formatDate(date, format)
+    }
+  },
+  watch: {
+    'visible' (val) {
+      if (val) {
+        this.initView()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.detail-layout {
+  margin-left: 44px;
+}
+.text {
+  color: rgba(0, 0, 0, .45);
+}
+
+.heading {
+  color: rgba(0, 0, 0, .85);
+  font-size: 20px;
+}
+
+.no-data {
+  color: rgba(0, 0, 0, .25);
+  text-align: center;
+  line-height: 64px;
+  font-size: 16px;
+
+  i {
+    font-size: 24px;
+    margin-right: 16px;
+    position: relative;
+    top: 3px;
+  }
+}
+
+.mobile {
+  .detail-layout {
+    margin-left: unset;
+  }
+  .text {
+
+  }
+  .status-list {
+    text-align: left;
+  }
+}
+
+.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>

package/src/base-client/components/common/XDetailsView/index.js

@@ -1,3 +1,3 @@
-import XDetailsView from './XDetailsView'
-
-export default XDetailsView
+import XDetailsView from './XDetailsView'
+
+export default XDetailsView

package/src/base-client/components/common/XForm/XStatusButton.vue

@@ -1,54 +1,54 @@
-<template>
-  <div>
-    <a-button type="primary" @click="handleClick">{{ currentLabel }}</a-button>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'StateButton',
-  props: {
-    // 定义状态和对应的显示文本与事件
-    states: {
-      type: Array,
-      required: true,
-      default: () => [
-        { label: '状态1', event: 'state1Event' },
-        { label: '状态2', event: 'state2Event' },
-        { label: '状态3', event: 'state3Event' },
-      ],
-    },
-    initialIndex: {
-      type: Number,
-      default: 0,
-    },
-  },
-  data () {
-    return {
-      currentIndex: this.initialIndex,
-    }
-  },
-  computed: {
-    // 当前显示的按钮文本
-    currentLabel () {
-      return this.states[this.currentIndex]?.label || '按钮'
-    },
-  },
-  methods: {
-    handleClick () {
-      // 触发当前状态的事件
-      const currentState = this.states[this.currentIndex]
-      if (currentState && currentState.event) {
-        this.$emit(currentState.event)
-      }
-
-      // 切换到下一个状态
-      this.currentIndex = (this.currentIndex + 1) % this.states.length
-    },
-  },
-}
-</script>
-
-<style scoped>
-/* 添加样式以适应项目需求 */
-</style>
+<template>
+  <div>
+    <a-button type="primary" @click="handleClick">{{ currentLabel }}</a-button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'StateButton',
+  props: {
+    // 定义状态和对应的显示文本与事件
+    states: {
+      type: Array,
+      required: true,
+      default: () => [
+        { label: '状态1', event: 'state1Event' },
+        { label: '状态2', event: 'state2Event' },
+        { label: '状态3', event: 'state3Event' },
+      ],
+    },
+    initialIndex: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data () {
+    return {
+      currentIndex: this.initialIndex,
+    }
+  },
+  computed: {
+    // 当前显示的按钮文本
+    currentLabel () {
+      return this.states[this.currentIndex]?.label || '按钮'
+    },
+  },
+  methods: {
+    handleClick () {
+      // 触发当前状态的事件
+      const currentState = this.states[this.currentIndex]
+      if (currentState && currentState.event) {
+        this.$emit(currentState.event)
+      }
+
+      // 切换到下一个状态
+      this.currentIndex = (this.currentIndex + 1) % this.states.length
+    },
+  },
+}
+</script>
+
+<style scoped>
+/* 添加样式以适应项目需求 */
+</style>