vue2-client 1.16.47 → 1.16.49

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

@@ -6,6 +6,7 @@
           :key="'card' + itemIndex"
           class="data-card"
           :class="{ 'card-clicked': card.isClicked }"
+          :headStyle="{ backgroundColor: '#f9f9f9' }"
         >
           <div
             v-if="config && card[config.ribbon]"
@@ -56,7 +57,7 @@
                       <div class="progress-done" :style="'width:' + card[item.key] * 100 + '%;backgroundColor: ' + determineRatioColor(card[item.key] * 100)"></div>
                     </div>
                   </div>
-                  <div class="progress-num">{{ card[item.key] * 100 }}%</div>
+                  <a-progress :percent="card[item.key]" :stroke-color="{ '0%': '#108ee9', '100%': '#87d068' }" strokeWidth="10" :style="{ width: '95%' }" />
                 </template>
                 <template v-else-if="item.type === 'custom' && tableColumns">
                   <!-- 根据 tableColumns 显示自定义内容 -->
@@ -75,7 +76,7 @@
                   </span>
                 </template>
                 <template v-else>
-                  <span class="body-item-value">{{ card[item.key] }}</span>
+                  <span class="body-item-value" style="float: right;">{{ card[item.key] }}</span>
                 </template>
               </div>
               <a-divider
@@ -87,23 +88,19 @@
           </div>
           <!-- 下方按钮 -->
           <template #actions>
-            <a-row align="middle" class="custom-actions" v-if="config && config.footer && config.footer.length > 0">
+            <div class="custom-actions" v-if="config && config.footer && config.footer.length > 0">
               <template v-for="(item, footerIndex) in config.footer">
-                <a-col :key="'footer_' + footerIndex" class="footer-item" :span="11" @click="clickFooter(card, item.emit, itemIndex)">
-                  <span>
-                    <a-icon :type="item.icon" class="footer-icon" />
-                    <span>{{ item.label }}</span>
-                  </span>
-                </a-col>
-                <a-col
+                <div :key="'footer_' + footerIndex" class="footer-item" @click="clickFooter(card, item.emit, itemIndex)">
+                  <a-icon :type="item.icon" class="footer-icon" />
+                  <span>{{ item.label }}</span>
+                </div>
+                <a-divider
                   v-if="footerIndex !== config.footer.length - 1"
-                  :span="1"
                   :key="'footer_' + footerIndex + 'after'"
-                  class="footer-item-split">
-                  |
-                </a-col>
+                  type="vertical"
+                  class="footer-item-split" />
               </template>
-            </a-row>
+            </div>
           </template>
         </a-card>
       </template>
@@ -428,16 +425,25 @@ export default {
   overflow-x: hidden;
   max-height: 85vh;
   .data-card {
-    width: 100%;
-    max-width: 300px;
+    flex: 0 0 20%;
+    max-width: 20%;
+    box-sizing: border-box;
     border: 2px solid rgb(244,244,244);
     border-radius: 5px;
-    margin: 2px;
+    margin: 0;
     overflow: hidden;
 
     ::v-deep .ant-card-body {
       padding: 15px !important; // 使用 !important 确保样式覆盖
     }
+    ::v-deep .ant-card-head {
+      padding: 0 8px !important; // 收紧左右内边距，贴近边框
+    }
+    ::v-deep .ant-card-head-title {
+      padding: 10px 0 !important; // 仅上下留白
+      margin: 0 !important;
+    }
+    ::v-deep .ant-card-head-wrapper { padding: 0 !important; }
 
     .header {
       width: 100%;
@@ -526,6 +532,7 @@ export default {
     display: flex;
     align-items: center;
     gap: 12px;
+    padding-left: 0; // 取消额外左缩进，进一步贴边
 
     &:hover {
       cursor: pointer;
@@ -568,6 +575,9 @@ export default {
           margin-left: 6px;
           color: #808080;
         }
+        .title-name {
+          font-weight: bold;
+        }
         .title-title3 {
           color: #808080;
         }
@@ -599,6 +609,10 @@ export default {
   }
 
   .custom-actions {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
       .footer-icon {
         margin-right: 5px;
       }
@@ -610,12 +624,24 @@ export default {
       .footer-item {
         color: rgba(117, 117, 117, 0.8);
         font-size: 1em;
+        white-space: nowrap;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex: 1 1 0;
+        min-width: 0;
       }
 
       .footer-item:hover {
         color: rgb( 24,144,255 );
         cursor: pointer;
       }
+      :deep(.ant-divider-vertical) {
+        height: 24px;
+        border-left: 1px solid rgba(220, 220, 220, 0.59);
+        top: 0;
+        margin: 0 8px;
+      }
   }
 }
 

package/src/base-client/components/common/XDataCard/test.vue

@@ -0,0 +1,367 @@
+<template>
+  <a-card>
+    <div>
+      <XFormTable
+        :custom-add="true"
+        :customEdit="true"
+        @add="handleAdd"
+        @edit="change"
+        title="计划管理"
+        :queryParamsName="queryParamsName"
+        :fixedQueryForm="{ f_operator_id: this.currUser.id }"
+        service-name="af-safecheck"
+        ref="x_form_table"
+        @plan="userEdit"
+        @planIssued="planIssued"
+      />
+    </div>
+    <!--    新增修改弹出框-->
+    <a-modal
+      :visible="visible"
+      :bodyStyle="{height:'70vh'}"
+      title="计划管理"
+      :confirm-loading="confirmLoading"
+      @ok="submitForm"
+      @cancel="handleCancel"
+      width="85vw">
+      <x-form-group ref="x_form_group"></x-form-group>
+    </a-modal>
+    <!--  修改安检册抽屉  -->
+    <a-drawer
+      :title="drawerTitle"
+      width="80%"
+      :destroyOnClose="true"
+      @ok="handleDrawerOk"
+      @close="handleDrawerOk"
+      :zIndex="999"
+      :visible="showUserEditDrawer">
+      <XFormTable
+        :one-of-two-x-form-table-in-one-row="true"
+        service-name="af-safecheck"
+        :query-params-name="drawerQueryParamName"
+        :customAdd="true"
+        :customDelete="true"
+        @add="activeInnerEditor"
+        @del="deletePlanUser"
+        :fixed-query-form="XFormTableLFixedQueryForm"
+        ref="XFormTableL"/>
+    </a-drawer>
+    <!-- 用户列表弹窗 -->
+    <a-modal
+      :visible="showUserTableModal"
+      title="用户列表"
+      width="80vw"
+      :bodyStyle="{height:'70vh'}"
+      @ok="unregisterAdd"
+      @cancel="closeUserTableModal"
+      :destroyOnClose="true"
+      :zIndex="1000"
+    >
+      <XFormTable
+        :one-of-two-x-form-table-in-one-row="true"
+        :fixed-query-form="fixedQueryForm"
+        service-name="af-safecheck"
+        :query-params-name="XFormTableRQueryParamsName"
+        @afterQuery="userModalAfterQuery"
+        ref="XFormTableUserModal"
+      >
+        <template #button>
+          <div style="display: flex; align-items: center">
+            <a-select
+              :value="selectUserMode"
+              style="width: 120px"
+              :get-popup-container="triggerNode => triggerNode.parentNode"
+              @change="handleSelectUserModeChange"
+            >
+              <a-select-option value="selected">
+                勾选用户
+              </a-select-option>
+              <a-select-option value="eligible">
+                条件选择
+              </a-select-option>
+            </a-select>
+          </div>
+        </template>
+      </XFormTable>
+    </a-modal>
+  </a-card>
+</template>
+
+<script>
+import XFormTable from '../XFormTable/XFormTable.vue'
+import { mapState } from 'vuex'
+import { logicPost, runLogic, getConfigByName } from '@vue2-client/services/api/common'
+import { post } from '@vue2-client/services/api/restTools'
+import XFormGroup from '../XFormGroup/XFormGroup.vue'
+export default {
+  name: 'PlanManagement',
+  components: {
+    XFormTable,
+    XFormGroup,
+  },
+  data () {
+    return {
+      // 修改选中的数据
+      changeNum: 0,
+      // 是修改还是添加
+      addOrEdit: '添加',
+      // 是否显示加载等待转圈圈
+      confirmLoading: false,
+      // 是否弹出添加框
+      visible: false,
+      // 查询配置文件名
+      queryParamsName: 'checkPlanListCRUD',
+      // 控制新增弹框渲染
+      showAddMenu: true,
+      drawerTitle: '',
+      showUserEditDrawer: false,
+      // 新增：控制用户表格弹窗显示
+      showUserTableModal: false,
+      // 计划内调整
+      XFormTableLFixedQueryForm: {},
+      XFormTableRQueryParamsName: 'checkPlanUserDetailCRUD',
+      // 所有安检员
+      allCheckers: [],
+      // 未注册小区 or 未注册用户
+      unregisterType: 'user',
+      fixedQueryForm: {},
+      // XFormTable选择的计划ID
+      editingPlanId: undefined,
+      drawerQueryParamName: 'planItemCRUD',
+      // 选择用户模式(selected/eligible)
+      selectUserMode: 'selected',
+      userModalConditionParams: {}
+    }
+  },
+  methods: {
+    // 提交新增修改表单
+    submitForm () {
+      this.confirmLoading = true
+      this.$refs.x_form_group.onSubmit().then(res => {
+        if (this.addOrEdit === '修改') {
+          res.checkListDetail.id = this.$refs.x_form_table.table_selectedRows[0].c_id
+        }
+        const detail = {
+          ...res.checkListDetail,
+          // f_create_time: moment(),
+          f_operator: this.currUser.username,
+          f_operator_id: this.currUser.id,
+          f_filiale_id: this.currUser.orgid,
+          f_filiale: this.currUser.orgs,
+          f_plan_type: '专项计划',
+        }
+        const data = {
+          type: this.addOrEdit,
+          checkListDetail: detail,
+          checkerList: res.checkerList
+        }
+        post('/api/af-safecheck/logic/createCheckList', data, null).then(() => {
+          this.$message.success(`操作成功！`)
+          this.$refs.x_form_table.refreshTable(false)
+          this.visible = false
+        }).catch(() => {
+          this.$message.error(`操作失败！`)
+        })
+      }).finally(
+        this.confirmLoading = false
+      )
+    },
+    // 取消提交表单
+    handleCancel () {
+      this.visible = false
+    },
+    // 修改表单内容
+    change () {
+      post('/api/af-safecheck/logic/queryPlanList', { id: this.$refs.x_form_table.table_selectedRows[0].c_id }, null).then(dataRes => {
+        getConfigByName('CreateCheckPlanFromGroup', 'af-safecheck', (res) => {
+          this.visible = true
+          this.addOrEdit = '修改'
+          this.$nextTick(() => {
+            this.$refs.x_form_group.init({
+              ...res,
+              serviceName: 'af-safecheck',
+              modifyModelData: dataRes,
+              showLeftTab: true
+            })
+          })
+        })
+      }).catch(() => {
+        this.$message.success(`操作失败！`)
+      })
+    },
+    closeUserTableModal () {
+      this.showUserTableModal = false
+      this.selectUserMode = 'selected'
+    },
+    userModalAfterQuery (res, conditionParams) {
+      this.userModalConditionParams = conditionParams
+    },
+    unregisterAdd () {
+      let selectedRows = []
+      if (this.selectUserMode === 'selected') {
+        // 获取选择的数据
+        if (this.$refs.XFormTableUserModal.table_selectedRows.length === 0) {
+          return this.$message.error('请选择数据后再进行操作！')
+        }
+        selectedRows = this.$refs.XFormTableUserModal.table_selectedRows
+      } else {
+        // 查询条件查询数据
+      }
+      const rows = []
+      selectedRows.forEach(item => {
+        rows.push(item.ui_f_userinfo_id)
+      })
+      logicPost('addAreaAndUserToPlan', {
+        selectType: this.selectUserMode,
+        userModalConditionParams: {
+          querySummary: false,
+          pageNo: 1,
+          pageSize: -1,
+          conditionParams: this.userModalConditionParams,
+          queryParamsName: 'checkPlanUserDetailCRUD',
+        },
+        checkPlanId: this.editingPlanId,
+        rows: rows,
+        type: this.unregisterType,
+        filialeid: this.currUser.orgid
+      }).then(res => {
+        if (res.code === 200) {
+          this.$message.success(`添加成功，本次操作添加用户数 ${res.data.successCon}`)
+          this.$refs.XFormTableL.refreshTable()
+          this.$refs.x_form_table.refreshTable()
+          this.closeUserTableModal()
+        } else {
+          this.$message.error('给当前计划添加数据失败！')
+        }
+      }).catch((err) => {
+        this.$message.error('请求失败，请稍后再试！')
+        console.error(err)
+      })
+    },
+    // 新增
+    activeInnerEditor () {
+      this.fixedQueryForm = {
+        ui_f_filialeid: this.currUser.orgid,
+        f_plan_id: this.editingPlanId
+      }
+      this.showUserTableModal = true
+    },
+    deletePlanUser (data, callback) {
+      for (let i = 0; i < data.length; i++) {
+        if (data[i].cpi_f_state === '已检') {
+          this.$message.error('已检用户不能删除！')
+          callback()
+          return
+        }
+      }
+      runLogic('deletePlanUser', {
+        deleteUser: data,
+        checkPlanId: this.editingPlanId
+      }).then(() => {
+        callback()
+        this.$message.success('删除成功')
+        this.$refs.XFormTableL.refreshTable()
+        this.$refs.x_form_table.refreshTable()
+      }).catch(() => {
+        this.$message.error('删除失败')
+      })
+    },
+    // 点击新增
+    handleAdd () {
+      this.visible = true
+      this.addOrEdit = '添加'
+      getConfigByName('CreateCheckPlanFromGroup', 'af-safecheck', (res) => {
+        this.$refs.x_form_group.init({
+          ...res,
+          serviceName: 'af-safecheck',
+          showLeftTab: true
+        })
+      })
+    },
+    // 计划详情
+    userEdit (data) {
+      this.drawerQueryParamName = 'planItemCRUD'
+      if (data.c_f_issued === '是' && data.c_f_plan_type !== '专项计划') {
+        this.drawerQueryParamName = 'issuePlanItemCRUD'
+      }
+      this.drawerTitle = '计划名称：' + data.c_f_plan_name
+      this.editingPlanId = data.c_id
+      this.XFormTableLFixedQueryForm = { cpi_f_plan_id: data.c_id }
+      this.showUserEditDrawer = true
+    },
+    // 下发计划
+    planIssued (data) {
+      logicPost('planIssued', {
+        id: data.c_id,
+        issueUserName: this.currUser.name,
+        issueUserId: this.currUser.id
+      }).then(() => {
+        this.$message.success('下发成功')
+        this.$refs.x_form_table.refresh()
+      })
+    },
+    // 关闭抽屉
+    handleDrawerOk () {
+      this.showUserEditDrawer = false
+    },
+    // 处理用户选择模式变化
+    handleSelectUserModeChange (value) {
+      if (value === 'eligible') {
+        // 如果当前有选中的用户数据，弹出确认提示
+        if (this.$refs.XFormTableUserModal && this.$refs.XFormTableUserModal.table_selectedRows.length > 0) {
+          this.$confirm({
+            title: '提示',
+            content: '选中【条件选择】将清空你勾选的用户数据',
+            onOk: () => {
+              // 确认后更新下拉菜单值
+              this.selectUserMode = 'eligible'
+              // 清空数据, 并且禁用选择
+              this.$refs.XFormTableUserModal.clearRowKeys()
+              this.$refs.XFormTableUserModal.$refs.xTable.selectRowMode = 'disabled'
+            },
+            onCancel: () => {
+              // 取消时恢复原来的值
+              this.selectUserMode = 'selected'
+            },
+            zIndex: 2000
+          })
+        } else {
+          // 没有选中数据时直接更新
+          this.selectUserMode = 'eligible'
+          // 清空数据, 并且禁用选择
+          this.$refs.XFormTableUserModal.clearRowKeys()
+          this.$refs.XFormTableUserModal.$refs.xTable.selectRowMode = 'disabled'
+        }
+      } else {
+        // 选择"勾选用户"时直接更新
+        this.selectUserMode = value
+        // 启用选择
+        this.$refs.XFormTableUserModal.$refs.xTable.selectRowMode = 'listView'
+      }
+    },
+  },
+  mounted () {
+    // 获取当前组织ID
+    // 获取所有安检员，用于下拉框
+    logicPost('getAllCheckerByOrgId', { orgId: this.currUser.orgid }).then(res => {
+      res.forEach(checker => {
+        this.allCheckers.push({
+          id: checker.id,
+          name: checker.ename
+        })
+      })
+    })
+    // 获取所有安检模板名，用于下拉框
+    logicPost('getAllCheckTemplate').then(res => {
+      this.allCheckTemplate = res
+    })
+  },
+  computed: {
+    ...mapState('account', { currUser: 'user' }),
+  }
+}
+
+</script>
+
+<style scoped>
+</style>