Browse Source

账号绑定站点时选择站点组件优化

zhangqiang 9 months ago
parent
commit
89168616a8

+ 1 - 1
jeecg-boot/jeecg-module-system/jeecg-system-biz/src/main/java/org/jeecg/modules/okki/site/entity/OkkiSite.java

@@ -51,7 +51,7 @@ public class OkkiSite implements Serializable {
 	/**站点id*/
 	@Excel(name = "站点id", width = 15)
     @ApiModelProperty(value = "站点id")
-    private Integer siteId;
+    private String siteId;
 	/**公司名称*/
 	@Excel(name = "公司名称", width = 15)
     @ApiModelProperty(value = "公司名称")

+ 1 - 1
jeecg-boot/jeecg-module-system/jeecg-system-biz/src/main/java/org/jeecg/modules/okki/site/entity/OkkiSiteStatusChangeLog.java

@@ -51,7 +51,7 @@ public class OkkiSiteStatusChangeLog implements Serializable {
 	/**站点id*/
 	@Excel(name = "站点id", width = 15)
     @ApiModelProperty(value = "站点id")
-    private Integer okkiSiteId;
+    private String okkiSiteId;
     /**更新前状态*/
     @Excel(name = "更新前状态", width = 15, dicCode = "site_status")
     @Dict(dicCode = "site_status")

+ 1 - 1
jeecg-boot/jeecg-module-system/jeecg-system-biz/src/main/java/org/jeecg/modules/okki/site/param/ChangeSiteStatusParam.java

@@ -5,7 +5,7 @@ import lombok.Data;
 @Data
 public class ChangeSiteStatusParam {
 
-    private Integer site_id;
+    private String site_id;
 
     private Integer status;
 }

+ 1 - 1
jeecg-boot/jeecg-module-system/jeecg-system-biz/src/main/java/org/jeecg/modules/okki/site/param/OkkiSiteParam.java

@@ -9,7 +9,7 @@ public class OkkiSiteParam implements Serializable {
     private static final long serialVersionUID = 1L;
 
     /**站点id*/
-    private Integer site_id;
+    private String site_id;
     /**公司名称*/
     private String company_name = "";
     /**初始化的域名*/

+ 2 - 0
jeecg-boot/jeecg-module-system/jeecg-system-start/src/main/resources/application-dev.yml

@@ -185,6 +185,8 @@ mybatis-plus:
       id-type: ASSIGN_ID
       # 默认数据库表下划线命名
       table-underline: true
+      logic-delete-value: 1 # 逻辑已删除值(默认为 1)
+      logic-not-delete-value: 0 # 逻辑未删除值(默认为 0)
   configuration:
     # 这个配置会将执行的sql打印出来,在开发或测试的时候可以用
     #log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

+ 1 - 1
docker/okki-oms.conf → jeecgboot-vue3/nginx/okki-oms.conf

@@ -70,4 +70,4 @@ server
 
     #access_log  /www/wwwlogs/JavaWeb_AntdVue_jar.log;
     #error_log  /www/wwwlogs/JavaWeb_AntdVue_jar.error.log;
-}
+}

+ 188 - 0
jeecgboot-vue3/src/components/JVxeCustom/site/JVxeSiteSelectCell.vue

@@ -0,0 +1,188 @@
+<!--站点选择组件-->
+<template>
+  <div>
+    <JSelectBiz @change="handleChange" @handleOpen="handleOpen" :loading="loadingEcho" v-bind="attrs"></JSelectBiz>
+    <SiteSelectModal :rowKey="rowKey" @register="regModal" @getSelectResult="setValue" v-bind="getBindValue" :excludeSiteIdList="excludeSiteIdList"></SiteSelectModal>
+  </div>
+</template>
+<script lang="ts">
+import { unref } from 'vue';
+import SiteSelectModal from './modal/SiteSelectModal.vue';
+import JSelectBiz from '/@/components/Form/src/jeecg/components/base/JSelectBiz.vue';
+import { defineComponent, ref, reactive, watchEffect, watch, provide } from 'vue';
+import { useModal } from '/@/components/Modal';
+import { propTypes } from '/@/utils/propTypes';
+import { useRuleFormItem } from '/@/hooks/component/useFormItem';
+import { useAttrs } from '/@/hooks/core/useAttrs';
+import { SelectValue } from 'ant-design-vue/es/select';
+
+export default defineComponent({
+  name: 'JVxeSiteSelectCell',
+  components: {
+    SiteSelectModal,
+    JSelectBiz,
+  },
+  inheritAttrs: false,
+  props: {
+    value: propTypes.oneOfType([propTypes.string, propTypes.array]),
+    labelKey: {
+      type: String,
+      default: 'companyName',
+    },
+    rowKey: {
+      type: String,
+      default: 'siteId',
+    },
+    params: {
+      type: Object,
+      default: () => {},
+    },
+    //update-begin---author:wangshuai ---date:20230703  for:【QQYUN-5685】5、离职人员可以选自己------------
+    //排除用户id的集合
+    excludeSiteIdList:{
+      type: Array,
+      default: () => [],
+    }
+    //update-end---author:wangshuai ---date:20230703  for:【QQYUN-5685】5、离职人员可以选自己------------
+  },
+  emits: ['options-change', 'change', 'update:value'],
+  setup(props, { emit }) {
+    const emitData = ref<any[]>();
+    //注册model
+    const [regModal, { openModal }] = useModal();
+    //表单值
+    const [state] = useRuleFormItem(props, 'value', 'change', emitData);
+    //下拉框选项值
+    const selectOptions = ref<SelectValue>([]);
+    //下拉框选中值
+    let selectValues = reactive<Recordable>({
+      value: [],
+      change: false,
+    });
+    // 是否正在加载回显数据
+    const loadingEcho = ref<boolean>(false);
+    //下发 selectOptions,xxxBiz组件接收
+    provide('selectOptions', selectOptions);
+    //下发 selectValues,xxxBiz组件接收
+    provide('selectValues', selectValues);
+    //下发 loadingEcho,xxxBiz组件接收
+    provide('loadingEcho', loadingEcho);
+
+    const tag = ref(false);
+    const attrs = useAttrs();
+
+    /**
+     * 监听组件值
+     */
+    watchEffect(() => {
+      props.value && initValue();
+      // 查询条件重置的时候 界面显示未清空
+      if (!props.value) {
+        selectValues.value = [];
+      }
+    });
+
+    /**
+     * 监听selectValues变化
+     */
+    watch(selectValues, () => {
+      if (selectValues) {
+        state.value = selectValues.value;
+      }
+    });
+
+    //update-begin---author:wangshuai ---date:20230703  for:【QQYUN-5685】5、离职人员可以选自己------------
+    const excludeSiteIdList = ref<any>([]);
+
+    /**
+     * 需要监听一下excludeSiteIdList,否则modal获取不到
+     */
+    watch(()=>props.excludeSiteIdList,(data)=>{
+      excludeSiteIdList.value = data;
+    },{ immediate: true })
+    //update-end---author:wangshuai ---date:20230703  for:【QQYUN-5685】5、离职人员可以选自己------------
+
+    /**
+     * 打卡弹出框
+     */
+    function handleOpen() {
+      tag.value = true;
+      openModal(true, {
+        isUpdate: false,
+      });
+    }
+
+    /**
+     * 将字符串值转化为数组
+     */
+    function initValue() {
+      let value = props.value ? props.value : [];
+      if (value && typeof value === 'string' && value != 'null' && value != 'undefined') {
+        state.value = value.split(',');
+        selectValues.value = value.split(',');
+      } else {
+        // 【VUEN-857】兼容数组(行编辑的用法问题)
+        selectValues.value = value;
+      }
+    }
+
+    /**
+     * 设置下拉框的值
+     */
+    function setValue(options, values) {
+      selectOptions.value = options;
+      //emitData.value = values.join(",");
+      state.value = values;
+      selectValues.value = values;
+      emit('update:value', values.join(','));
+    }
+    const getBindValue = Object.assign({}, unref(props), unref(attrs));
+
+    //update-begin---author:wangshuai ---date:20230711  for:换成异步组件加载,否则会影响到其他页面描述------------
+    /**
+     * 下拉框值改变回调事件
+     * @param values
+     */
+    function handleChange(values) {
+      emit('update:value', values);
+    }
+    //update-end---author:wangshuai ---date:20230711  for:换成异步组件加载,否则会影响到其他页面描述------------
+
+    return {
+      state,
+      attrs,
+      selectOptions,
+      getBindValue,
+      selectValues,
+      loadingEcho,
+      tag,
+      regModal,
+      setValue,
+      handleOpen,
+      excludeSiteIdList,
+      handleChange,
+    };
+  },
+});
+</script>
+<style lang="less" scoped>
+.j-select-row {
+  @width: 82px;
+
+  .left {
+    width: calc(100% - @width - 8px);
+  }
+
+  .right {
+    width: @width;
+  }
+
+  .full {
+    width: 100%;
+  }
+
+  :deep(.ant-select-search__field) {
+    display: none !important;
+  }
+}
+</style>

+ 11 - 0
jeecgboot-vue3/src/components/JVxeCustom/site/modal/SiteSelect.ts

@@ -0,0 +1,11 @@
+import { defHttp } from '/@/utils/http/axios';
+enum Api {
+  siteList = '/site/okkiSite/list',
+}
+/**
+ * 站点列表
+ * @param params
+ */
+export const getSiteList = (params) => {
+  return defHttp.get({ url: Api.siteList, params });
+};

+ 249 - 0
jeecgboot-vue3/src/components/JVxeCustom/site/modal/SiteSelectModal.vue

@@ -0,0 +1,249 @@
+<!--用户选择框-->
+<template>
+  <div>
+    <BasicModal
+      v-bind="$attrs"
+      @register="register"
+      :title="modalTitle"
+      :width="showSelected ? '1200px' : '900px'"
+      wrapClassName="j-user-select-modal"
+      @ok="handleOk"
+      destroyOnClose
+      @visible-change="visibleChange"
+    >
+      <a-row>
+        <a-col :span="showSelected ? 18 : 24">
+          <BasicTable
+            ref="tableRef"
+            :columns="columns"
+            :scroll="tableScroll"
+            v-bind="getBindValue"
+            :useSearchForm="true"
+            :formConfig="formConfig"
+            :api="getSiteList"
+            :searchInfo="searchInfo"
+            :rowSelection="rowSelection"
+            :indexColumnProps="indexColumnProps"
+            :afterFetch="afterFetch"
+          >
+            <!-- update-begin-author:taoyan date:2022-5-25 for: VUEN-1112一对多 用户选择 未显示选择条数,及清空 -->
+            <template #tableTitle></template>
+            <!-- update-end-author:taoyan date:2022-5-25 for: VUEN-1112一对多 用户选择 未显示选择条数,及清空 -->
+          </BasicTable>
+        </a-col>
+        <a-col :span="showSelected ? 6 : 0">
+          <BasicTable
+            v-bind="selectedTable"
+            :dataSource="selectRows"
+            :useSearchForm="true"
+            :formConfig="{ showActionButtonGroup: false, baseRowStyle: { minHeight: '40px' } }"
+          >
+            <!--操作栏-->
+            <template #action="{ record }">
+              <a href="javascript:void(0)" @click="handleDeleteSelected(record)"><Icon icon="ant-design:delete-outlined"></Icon></a>
+            </template>
+          </BasicTable>
+        </a-col>
+      </a-row>
+    </BasicModal>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, unref, ref, watch } from 'vue';
+import { BasicModal, useModalInner } from '/@/components/Modal';
+import { getSiteList } from './SiteSelect';
+import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+import { useSelectBiz } from '/@/components/Form/src/jeecg/hooks/useSelectBiz';
+import { useAttrs } from '/@/hooks/core/useAttrs';
+import { selectProps } from '/@/components/Form/src/jeecg/props/props';
+
+export default defineComponent({
+  name: 'SiteSelectModal',
+  components: {
+    //此处需要异步加载BasicTable
+    BasicModal,
+    BasicTable: createAsyncComponent(() => import('/@/components/Table/src/BasicTable.vue'), {
+      loading: true,
+    }),
+  },
+  props: {
+    ...selectProps,
+    //选择框标题
+    modalTitle: {
+      type: String,
+      default: '选择站点',
+    },
+    //update-begin---author:wangshuai ---date:20230703  for:【QQYUN-5685】5、离职人员可以选自己------------
+    //排除用户id的集合
+    excludeSiteIdList: {
+      type: Array,
+      default: [],
+    },
+    //update-end---author:wangshuai ---date:20230703  for:【QQYUN-5685】5、离职人员可以选自己------------
+  },
+  emits: ['register', 'getSelectResult'],
+  setup(props, { emit, refs }) {
+    // update-begin-author:taoyan date:2022-5-24 for: VUEN-1086 【移动端】用户选择 查询按钮 效果不好 列表展示没有滚动条
+    const tableScroll = ref<any>({ x: false });
+    const tableRef = ref();
+    //注册弹框
+    const [register, { closeModal }] = useModalInner(() => {
+      if (window.innerWidth < 900) {
+        tableScroll.value = { x: 900 };
+      } else {
+        tableScroll.value = { x: false };
+      }
+      //update-begin-author:taoyan date:2022-6-2 for: VUEN-1112 一对多 用户选择 未显示选择条数,及清空
+      setTimeout(() => {
+        if (tableRef.value) {
+          tableRef.value.setSelectedRowKeys(selectValues['value'] || []);
+        }
+      }, 800);
+      //update-end-author:taoyan date:2022-6-2 for: VUEN-1112 一对多 用户选择 未显示选择条数,及清空
+    });
+    // update-end-author:taoyan date:2022-5-24 for: VUEN-1086 【移动端】用户选择 查询按钮 效果不好 列表展示没有滚动条
+    const attrs = useAttrs();
+    //表格配置
+    const config = {
+      canResize: false,
+      bordered: true,
+      size: 'small',
+    };
+    const getBindValue = Object.assign({}, unref(props), unref(attrs), config);
+    const [{ rowSelection, visibleChange, selectValues, indexColumnProps, getSelectResult, handleDeleteSelected, selectRows }] = useSelectBiz(
+      getSiteList,
+      getBindValue
+    );
+    const searchInfo = ref(props.params);
+    // update-begin--author:liaozhiyang---date:20230811---for:【issues/657】右侧选中列表删除无效
+    watch(rowSelection.selectedRowKeys, (newVal) => {
+      //update-begin---author:wangshuai ---date: 20230829  for:null指针异常导致控制台报错页面不显示------------
+      if(tableRef.value){
+        tableRef.value.setSelectedRowKeys(newVal);
+      }
+      //update-end---author:wangshuai ---date: 20230829 for:null指针异常导致控制台报错页面不显示------------
+    });
+    // update-end--author:liaozhiyang---date:20230811---for:【issues/657】右侧选中列表删除无效
+    //查询form
+    const formConfig = {
+      baseColProps: {
+        xs: 24,
+        sm: 8,
+        md: 6,
+        lg: 8,
+        xl: 6,
+        xxl: 6,
+      },
+      //update-begin-author:taoyan date:2022-5-24 for: VUEN-1086 【移动端】用户选择 查询按钮 效果不好 列表展示没有滚动条---查询表单按钮的栅格布局和表单的保持一致
+      actionColOptions: {
+        xs: 24,
+        sm: 8,
+        md: 8,
+        lg: 8,
+        xl: 8,
+        xxl: 8,
+      },
+      //update-end-author:taoyan date:2022-5-24 for: VUEN-1086 【移动端】用户选择 查询按钮 效果不好 列表展示没有滚动条---查询表单按钮的栅格布局和表单的保持一致
+      schemas: [
+        {
+          label: '站点名称',
+          field: 'companyName',
+          component: 'JInput',
+        },
+      ],
+    };
+    //定义表格列
+    const columns = [
+      {
+        title: '站点名称',
+        dataIndex: 'companyName',
+        width: 120,
+        align: 'left',
+      },
+      {
+        title: '站点id',
+        dataIndex: 'siteId',
+        width: 120,
+      },
+    ];
+    //已选择的table信息
+    const selectedTable = {
+      pagination: false,
+      showIndexColumn: false,
+      scroll: { y: 390 },
+      size: 'small',
+      canResize: false,
+      bordered: true,
+      rowKey: 'id',
+      columns: [
+        {
+          title: '站点名称',
+          dataIndex: 'companyName',
+          width: 40,
+        },
+        {
+          title: '操作',
+          dataIndex: 'action',
+          align: 'center',
+          width: 40,
+          slots: { customRender: 'action' },
+        },
+      ],
+    };
+    /**
+     * 确定选择
+     */
+    function handleOk() {
+      getSelectResult((options, values) => {
+        //回传选项和已选择的值
+        emit('getSelectResult', options, values);
+        //关闭弹窗
+        closeModal();
+      });
+    }
+
+    //update-begin---author:wangshuai ---date:20230703  for:【QQYUN-5685】5、离职人员可以选自己------------
+    /**
+     * 用户返回结果逻辑查询
+     */
+    function afterFetch(record) {
+      let excludeList = props.excludeSiteIdList;
+      if(!excludeList){
+        return record;
+      }
+      let arr:any[] = [];
+      //如果存在过滤用户id集合,并且后台返回的数据不为空
+      if(excludeList.length>0 && record && record.length>0){
+        for(let item of record){
+          if(excludeList.indexOf(item.id)<0){
+            arr.push({...item})
+          }
+        }
+        return arr;
+      }
+      return record;
+    }
+    //update-end---author:wangshuai ---date:20230703  for:【QQYUN-5685】5、离职人员可以选自己------------
+
+    return {
+      //config,
+      handleOk,
+      searchInfo,
+      register,
+      indexColumnProps,
+      visibleChange,
+      getBindValue,
+      getSiteList,
+      formConfig,
+      columns,
+      rowSelection,
+      selectRows,
+      selectedTable,
+      handleDeleteSelected,
+      tableScroll,
+      tableRef,
+      afterFetch,
+    };
+  },
+});
+</script>

+ 4 - 2
jeecgboot-vue3/src/views/okki/account/components/OkkiAccountForm.vue

@@ -14,7 +14,8 @@
         </a-col>
         <a-col :span="24">
           <a-form-item label="关联站点" v-bind="validateInfos.siteIds">
-	          <j-checkbox type="checkbox" v-model:value="formData.siteIds" dictCode="okki_site,company_name,site_id" placeholder="请选择关联站点" :disabled="disabled"/>
+            <j-vxe-site-select-cell v-model:value="formData.siteIds" :disabled="disabled" />
+<!--	          <j-checkbox type="checkbox" v-model:value="formData.siteIds" dictCode="okki_site,company_name,site_id" placeholder="请选择关联站点" :disabled="disabled"/>-->
           </a-form-item>
         </a-col>
         <a-col :span="24">
@@ -32,7 +33,8 @@
   import { defHttp } from '/@/utils/http/axios';
   import { useMessage } from '/@/hooks/web/useMessage';
   import JSelectUser from '/@/components/Form/src/jeecg/components/JSelectUser.vue';
-  import JCheckbox from "/@/components/Form/src/jeecg/components/JCheckbox.vue";
+  import JVxeSiteSelectCell from '/@/components/JVxeCustom/site/JVxeSiteSelectCell.vue';
+  // import JCheckbox from "/@/components/Form/src/jeecg/components/JCheckbox.vue";
   import { getValueType } from '/@/utils';
   import { saveOrUpdate } from '../OkkiAccount.api';
   import { Form } from 'ant-design-vue';