企业微信支持改造

src/views/system/appconfig/ThirdApp.api.ts

@@ -6,6 +6,10 @@ enum Api {
   editThirdAppConfig = '/sys/thirdApp/editThirdAppConfig',
   getThirdConfigByTenantId = '/sys/thirdApp/getThirdConfigByTenantId',
   syncDingTalkDepartUserToLocal = '/sys/thirdApp/sync/dingtalk/departAndUser/toLocal',
+  getThirdUserByWechat = '/sys/thirdApp/getThirdUserByWechat',
+  wechatEnterpriseToLocal = '/sys/thirdApp/sync/wechatEnterprise/departAndUser/toLocal',
+  getThirdUserBindByWechat = '/sys/thirdApp/getThirdUserBindByWechat',
+  deleteThirdAccount = '/sys/thirdApp/deleteThirdAccount',
 }
 
 /**
@@ -31,3 +35,35 @@ export const getThirdConfigByTenantId = (params) => {
 export const syncDingTalkDepartUserToLocal = () => {
   return defHttp.get({ url: Api.syncDingTalkDepartUserToLocal }, { isTransformResponse: false });
 };
+
+/**
+ * 获取企业微信绑定的用户信息
+ * @param params
+ */
+export const getThirdUserByWechat = () => {
+  return defHttp.get({ url: Api.getThirdUserByWechat }, { isTransformResponse: false });
+};
+
+/**
+ * 同步企业微信用户部门到本地
+ * @param params
+ */
+export const wechatEnterpriseToLocal = (params) => {
+  return defHttp.get({ url: Api.wechatEnterpriseToLocal, params }, { isTransformResponse: false });
+};
+
+/**
+ * 获取绑定企业微信的用户
+ * @param params
+ */
+export const getThirdUserBindByWechat = () => {
+  return defHttp.get({ url: Api.getThirdUserBindByWechat }, { isTransformResponse: false });
+};
+
+/**
+ * 根据第三方账号表的id解绑账号
+ * @param params
+ */
+export const deleteThirdAccount = (params) => {
+  return defHttp.delete({ url: Api.deleteThirdAccount, params }, { isTransformResponse:false, joinParamsToUrl: true });
+};

src/views/system/appconfig/ThirdApp.data.ts

@@ -37,7 +37,7 @@ export const thirdAppFormSchema: FormSchema[] = [
     label: 'agentAppSecret',
     field: 'agentAppSecret',
     component: 'Input',
-    ifShow: ({ values }) => values.thirdType == 'wechat_enterprise',
+    ifShow: false,
   },{
     label: '启用',
     field: 'status',

src/views/system/appconfig/ThirdAppBindWeEnterpriseModal.vue

@@ -0,0 +1,316 @@
+<!--弹窗绑定企业微信页面-->
+<template>
+  <BasicModal @register="registerModal" :width="800" :title="title" destroyOnClose>
+    <a-spin :spinning="loading">
+      <div class="we-bind">
+        <a-row :span="24" class="we-title-background">
+          <a-col :span="12" class="border-right">
+            <span>组织用户</span>
+          </a-col>
+          <a-col :span="12" class="padding-left">
+            <span>企业微信用户</span>
+          </a-col>
+        </a-row>
+        <a-row :span="24">
+          <template v-for="(item, index) in bindData.jwUserDepartVos">
+            <a-col :span="12" class="border-right padding-left border-bottom">
+              <div class="we-account">
+                <a-avatar v-if="item.avatar" :src="getFileAccessHttpUrl(item.avatar)" :size="28"></a-avatar>
+                <a-avatar v-else :size="28">
+                  {{ item.realName.length > 2 ? item.realName.substr(0, 2) : item.realName }}
+                </a-avatar>
+                <a-input style="margin-left: 20px" :value="item.realName" readonly />
+              </div>
+            </a-col>
+            <a-col :span="12" class="padding-left border-bottom">
+              <div class="we-account">
+                <span v-if="item.wechatUserId || izBind" class="we-remove"
+                  >{{ item.wechatRealName }} <span style="margin-right: 20px" @click="handleRemoveClick(index, item)">移出</span></span
+                >
+                <a-select
+                  v-else
+                  v-model:value="item.wechatUserId"
+                  :options="userList"
+                  :fieldNames="{ label: 'wechatRealName', value: 'wechatUserId' }"
+                  style="width: 200px"
+                  showSearch
+                  @select="(val, option) => handleSelect(val, option, index)"
+                />
+              </div>
+            </a-col>
+          </template>
+        </a-row>
+      </div>
+    </a-spin>
+    <template #footer>
+      <a-button v-if="!izBind" type="primary" @click="handleSubmit">同步</a-button>
+    </template>
+  </BasicModal>
+</template>
+
+<script lang="ts">
+  import { defineComponent, h, ref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { getThirdUserByWechat, wechatEnterpriseToLocal, getThirdUserBindByWechat, deleteThirdAccount } from './ThirdApp.api';
+  import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { Modal } from 'ant-design-vue';
+  import { useUserStore } from '@/store/modules/user';
+
+  export default defineComponent({
+    name: 'ThirdAppBindWeEnterpriseModal',
+    components: { BasicModal },
+    setup(props, { emit }) {
+      const title = ref<string>('企业微信绑定');
+      //企业微信的绑定数据
+      const bindData = ref<any>({});
+      const loading = ref<boolean>(false);
+      const btnLoading = ref<boolean>(false);
+      const { createMessage } = useMessage();
+      const userList = ref<any>([]);
+      //同步文本信息展示
+      const syncText = ref<string>('');
+      //是否已绑定数据，展示不同的列表
+      const izBind = ref<boolean>(false);
+      const userStore = useUserStore();
+      //表单赋值
+      const [registerModal, { closeModal }] = useModalInner(async (data) => {
+        loading.value = true;
+        console.log('izBind：：', izBind);
+        if (!data.izBind) {
+          await getUnboundData();
+        } else {
+          await getBoundData();
+        }
+        izBind.value = data.izBind;
+      });
+
+      /**
+       * 未绑定的数据
+       */
+      async function getUnboundData() {
+        await getThirdUserByWechat().then((res) => {
+          if (res.success) {
+            let userLists = res.result.userList;
+            bindData.value = res.result;
+            userList.value = res.result.userList;
+            /*   if (userLists && userLists.length > 0) {
+            syncText.value = "";
+          } else {
+            syncText.value = "企业微信用户均已同步";
+          }*/
+            loading.value = false;
+          } else {
+            createMessage.warning(res.message);
+            loading.value = false;
+          }
+        });
+      }
+
+      /**
+       * 已绑定的数据
+       */
+      async function getBoundData() {
+        await getThirdUserBindByWechat().then((res) => {
+          if (res.success) {
+            bindData.value.jwUserDepartVos = res.result;
+            loading.value = false;
+          } else {
+            createMessage.warn(res.message);
+            loading.value = false;
+          }
+        });
+      }
+
+      /**
+       * 第三方配置点击事件
+       */
+      async function handleSubmit() {
+        btnLoading.value = true;
+        let userList = bindData.value.userList;
+        //重新封装数据，只留用户id和企业微信id即可,还需要把没绑定的用户传给后台
+        let params: any = [];
+        //查询用户绑定的企业微信用户
+        for (const item of bindData.value.jwUserDepartVos) {
+          if (item.wechatUserId) {
+            userList = userList.filter((a) => a.wechatUserId != item.wechatUserId);
+            params.push({
+              wechatUserId: item.wechatUserId,
+              wechatDepartId: item.wechatDepartId,
+              wechatRealName: item.wechatRealName,
+              userId: item.userId,
+            });
+          }
+        }
+        let text: string = '';
+        //查询未被绑定的租户
+        if (userList && userList.length > 0) {
+          for (const item of userList) {
+            params.push({ wechatUserId: item.wechatUserId, wechatDepartId: item.wechatDepartId, wechatRealName: item.wechatRealName });
+          }
+          text = '检测到未绑定的企业微信用户 ' + userList.length + ' 位，平台将会为这 ' + userList.length + ' 位用户创建新的账号';
+        }
+
+        Modal.confirm({
+          title: '确认同步',
+          content: text,
+          okText: '确认',
+          onOk: () => {
+            let json = JSON.stringify(params);
+            console.log('json：：', json);
+            wechatEnterpriseToLocal({ jwUserDepartJson: json })
+              .then((res) => {
+                let options = {};
+                if (res.success) {
+                  if (res.result) {
+                    options = {
+                      width: 600,
+                      title: res.message,
+                      content: () => {
+                        let nodes;
+                        let successInfo = [`成功信息如下：`, renderTextarea(h, res.result.successInfo.map((v, i) => `${i + 1}. ${v}`).join('\n'))];
+                        if (res.success) {
+                          nodes = [...successInfo, h('br'), `无失败信息！`];
+                        } else {
+                          nodes = [
+                            `失败信息如下：`,
+                            renderTextarea(h, res.result.failInfo.map((v, i) => `${i + 1}. ${v}`).join('\n')),
+                            h('br'),
+                            ...successInfo,
+                          ];
+                        }
+                        return nodes;
+                      },
+                    };
+                  }
+                  closeModal();
+                  emit('success', options, res);
+                }
+              })
+              .finally(() => {
+                btnLoading.value = false;
+              });
+          },
+        });
+      }
+
+      /**
+       * 下拉框选择事件
+       */
+      function handleSelect(val, option, index) {
+        bindData.value.jwUserDepartVos[index].wechatUserId = option.wechatUserId;
+        bindData.value.jwUserDepartVos[index].wechatRealName = option.wechatRealName;
+        bindData.value.jwUserDepartVos[index].wechatDepartId = option.wechatDepartId;
+        userList.value = userList.value.filter((item) => item.wechatUserId != option.wechatUserId);
+      }
+
+      /**
+       * 移出事件
+       * @param index
+       * @param item
+       */
+      function handleRemoveClick(index, item) {
+        if (!izBind.value) {
+          userList.value.push({
+            wechatUserId: item.wechatUserId,
+            wechatRealName: item.wechatRealName,
+            wechatDepartId: item.wechatDepartId,
+          });
+          bindData.value.jwUserDepartVos[index].wechatUserId = '';
+          bindData.value.jwUserDepartVos[index].wechatRealName = '';
+          bindData.value.jwUserDepartVos[index].wechatDepartId = '';
+        } else {
+          Modal.confirm({
+            title: '确认取消绑定吗',
+            okText: '确认',
+            onOk: async () => {
+              await deleteThirdAccount({ id: item.thirdId, sysUserId: userStore.getUserInfo.id }).then((res) => {
+                if (res.success) {
+                  createMessage.success('取消绑定成功！');
+                  getBoundData();
+                } else {
+                  createMessage.warning(res.message);
+                }
+              });
+            },
+          });
+        }
+      }
+
+      function renderTextarea(h, value) {
+        return h(
+          'div',
+          {
+            id: 'box',
+            style: {
+              minHeight: '100px',
+              border: '1px solid #d9d9d9',
+              fontSize: '14px',
+              maxHeight: '250px',
+              whiteSpace: 'pre',
+              overflow: 'auto',
+              padding: '10px',
+            },
+          },
+          value
+        );
+      }
+
+      return {
+        title,
+        registerModal,
+        handleSubmit,
+        bindData,
+        getFileAccessHttpUrl,
+        loading,
+        userList,
+        handleSelect,
+        handleRemoveClick,
+        btnLoading,
+        izBind,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .we-bind {
+    overflow-y: auto;
+    border: 1px rgb(240, 240, 240) solid;
+    border-bottom: none;
+    .we-title-background {
+      background: rgb(252, 252, 252);
+      height: 40px;
+      line-height: 40px;
+      padding: 0 10px;
+    }
+    .we-account {
+      display: flex;
+      height: 40px;
+      line-height: 40px;
+      align-items: center;
+    }
+
+    :deep(.ant-input) {
+      border: none;
+      padding: 0;
+      box-shadow: none;
+    }
+
+    .we-remove {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+      cursor: pointer;
+    }
+    .border-right {
+      border-right: 1px rgb(240, 240, 240) solid;
+    }
+    .border-bottom {
+      border-bottom: 1px rgb(240, 240, 240) solid;
+    }
+    .padding-left {
+      padding-left: 10px;
+    }
+  }
+</style>

src/views/system/appconfig/ThirdAppConfigList.vue

@@ -3,14 +3,14 @@
     <div class="ding-header">
       <ul class="ding-menu-tab">
         <li :class="activeKey === 'ding' ? 'active' : ''" @click="dingLiClick('ding')"><a>钉钉集成</a></li>
-        <li :class="activeKey === 'wechat' ? 'active' : ''" @click="dingLiClick('wechat')"><a>企业微信集成?</a></li>
+        <li :class="activeKey === 'wechat' ? 'active' : ''" @click="dingLiClick('wechat')"><a>企业微信集成</a></li>
       </ul>
     </div>
     <div v-show="activeKey === 'ding'" class="base-collapse">
       <ThirdAppDingTalkConfigForm />
     </div>
-    <div v-show="activeKey === 'wechat'" class="p-5 empty-image"> 
+    <div v-show="activeKey === 'wechat'" class="base-collapse">
-      <a-empty description="暂不支持" :image-style="{ margin: '0 auto', height: '160px' }" />
+      <ThirdAppWeEnterpriseConfigForm />
     </div>
   </div>
 </template>
@@ -18,12 +18,14 @@
 <script lang="ts">
   import { defineComponent, ref } from 'vue';
   import ThirdAppDingTalkConfigForm from './ThirdAppDingTalkConfigForm.vue';
+  import ThirdAppWeEnterpriseConfigForm from './ThirdAppWeEnterpriseConfigForm.vue';
   import { useDesign } from '/@/hooks/web/useDesign';
 
   export default defineComponent({
     name: 'ThirdAppConfigList',
     components: {
       ThirdAppDingTalkConfigForm,
+      ThirdAppWeEnterpriseConfigForm,
     },
     setup() {
       const { prefixCls } = useDesign('j-dd-container');

src/views/system/appconfig/ThirdAppConfigModal.vue

@@ -25,6 +25,11 @@
       //表单赋值
       const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
         setModalProps({ confirmLoading: true });
+        if (data.thirdType == 'dingtalk') {
+          title.value = '钉钉配置';
+        } else {
+          title.value = '企业微信配置';
+        }
         //重置表单
         await resetFields();
         let values = await getThirdConfigByTenantId({ tenantId: data.tenantId, thirdType: data.thirdType });

src/views/system/appconfig/ThirdAppDingTalkConfigForm.vue

@@ -6,7 +6,7 @@
         <template #header>
           <div style="font-size: 16px"> 1.获取对接信息</div>
         </template>
-        <div class="base-desc">从企业微信获取对接信息，即可开始集成以及同步通讯录</div>
+        <div class="base-desc">从钉钉开放平台获取对接信息，即可开始集成以及同步通讯录</div>
         <div style="margin-top: 5px">
           <a href='https://help.qiaoqiaoyun.com/expand/dingding.html' target='_blank'>如何获取对接信息?</a>
         </div>
@@ -24,19 +24,19 @@
           <div class="flex-flow">
             <div class="base-title">Agentld</div>
             <div class="base-message">
-              <a-input v-model:value="appConfigData.agentId" readonly />
+              <a-input-password v-model:value="appConfigData.agentId" readonly />
             </div>
           </div>
           <div class="flex-flow">
             <div class="base-title">AppKey</div>
             <div class="base-message">
-              <a-input v-model:value="appConfigData.clientId" readonly />
+              <a-input-password v-model:value="appConfigData.clientId" readonly />
             </div>
           </div>
           <div class="flex-flow">
             <div class="base-title">AppSecret</div>
             <div class="base-message">
-              <a-input v-model:value="appConfigData.clientSecret" readonly />
+              <a-input-password v-model:value="appConfigData.clientSecret" readonly />
             </div>
           </div>
           <div style="margin-top: 20px; width: 100%; text-align: right">
@@ -291,4 +291,5 @@
     position: relative;
     top: 2px
   }
+ :deep(.ant-collapse-borderless >.ant-collapse-item:last-child) {border-bottom-width:1px;}
 </style>

src/views/system/appconfig/ThirdAppWeEnterpriseConfigForm.vue

@@ -0,0 +1,247 @@
+<template>
+  <div class="base-collapse">
+    <div class="header"> 企业微信集成 </div>
+    <a-collapse expand-icon-position="right" :bordered="false">
+      <a-collapse-panel key="1">
+        <template #header>
+          <div style="font-size: 16px"> 1.获取对接信息</div>
+        </template>
+        <div class="base-desc">从企业微信平台获取对接信息，即可开始集成以及同步通讯录</div>
+        <div style="margin-top: 5px">
+          <a href="https://help.qiaoqiaoyun.com/expand/dingding.html" target="_blank">如何获取对接信息?</a>
+        </div>
+      </a-collapse-panel>
+    </a-collapse>
+    <div>
+      <a-collapse expand-icon-position="right" :bordered="false">
+        <a-collapse-panel key="2">
+          <template #header>
+            <div style="width: 100%; justify-content: space-between; display: flex">
+              <div style="font-size: 16px"> 2.对接信息录入</div>
+            </div>
+          </template>
+          <div class="flex-flow">
+            <div class="base-title">Agentld</div>
+            <div class="base-message">
+              <a-input-password v-model:value="appConfigData.agentId" readonly />
+            </div>
+          </div>
+          <div class="flex-flow">
+            <div class="base-title">AppKey</div>
+            <div class="base-message">
+              <a-input-password v-model:value="appConfigData.clientId" readonly />
+            </div>
+          </div>
+          <div class="flex-flow">
+            <div class="base-title">AppSecret</div>
+            <div class="base-message">
+              <a-input-password v-model:value="appConfigData.clientSecret" readonly />
+            </div>
+          </div>
+          <div style="margin-top: 20px; width: 100%; text-align: right">
+            <a-button @click="weEnterpriseEditClick">编辑</a-button>
+          </div>
+        </a-collapse-panel>
+      </a-collapse>
+      <div class="sync-padding">
+        <div style="font-size: 16px; width: 100%"> 3.数据同步</div>
+        <div style="margin-top: 20px" class="base-desc">
+          从企业微信同步到敲敲云
+          <a style="margin-left: 10px" @click="seeBindWeChat">查看已绑定的企业微信用户</a>
+          <div style="float: right">
+            <a-button @loading="btnLoading" @click="thirdUserByWechat">同步</a-button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <ThirdAppConfigModal @register="registerAppConfigModal" @success="handleSuccess" />
+  <ThirdAppBindWeEnterpriseModal @register="registerBindAppConfigModal" @success="handleBindSuccess" />
+</template>
+
+<script lang="ts">
+  import { defineComponent, onMounted, ref } from 'vue';
+  import { getThirdConfigByTenantId } from './ThirdApp.api';
+  import ThirdAppConfigModal from './ThirdAppConfigModal.vue';
+  import { useModal } from '/@/components/Modal';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { getTenantId } from '@/utils/auth';
+  import ThirdAppBindWeEnterpriseModal from './ThirdAppBindWeEnterpriseModal.vue';
+  import { Modal } from "ant-design-vue";
+
+  export default defineComponent({
+    name: 'ThirdAppWeEnterpriseConfigForm',
+    components: {
+      ThirdAppConfigModal,
+      ThirdAppBindWeEnterpriseModal,
+    },
+    setup() {
+      const btnLoading = ref<boolean>(false);
+      //第三方配置数据
+      const appConfigData = ref<any>({
+        agentId: '',
+        clientId: '',
+        clientSecret: '',
+        agentAppSecret: '',
+      });
+      //企业微信钉钉配置modal
+      const [registerAppConfigModal, { openModal }] = useModal();
+      const [registerBindAppConfigModal, { openModal: openBindModal }] = useModal();
+      const { createMessage } = useMessage();
+
+      /**
+       * 初始化数据
+       *
+       * @param params
+       */
+      async function initThirdAppConfigData(params) {
+        let values = await getThirdConfigByTenantId(params);
+        if (values) {
+          appConfigData.value = values;
+        }
+      }
+
+      /**
+       * 企业微信编辑
+       */
+      async function weEnterpriseEditClick() {
+        let tenantId = getTenantId();
+        openModal(true, {
+          tenantId: tenantId,
+          thirdType: 'wechat_enterprise',
+        });
+      }
+
+      /**
+       * 获取企业微信绑定的用户
+       */
+      async function thirdUserByWechat() {
+        openBindModal(true, { izBind: false });
+      }
+
+      /**
+       * 成功回调
+       */
+      function handleSuccess() {
+        let tenantId = getTenantId();
+        initThirdAppConfigData({ tenantId: tenantId, thirdType: 'wechat_enterprise' });
+      }
+
+      /**
+       * 绑定成功返回值
+       *
+       * @param options
+       * @param item
+       */
+      function handleBindSuccess(options, item) {
+        console.log("options:::",options)
+        console.log("item:::",item)
+        if (item.success) {
+          if (options != null) {
+            Modal.success(options);
+          } else {
+            createMessage.warning(item.message);
+          }
+        } else {
+          if (options && options.title) {
+            Modal.warning(options);
+          } else {
+            createMessage.warning({
+              content: '同步失败，请检查对接信息录入中是否填写正确，并确认是否已开启企业微信配置！',
+              duration: 5,
+            });
+          }
+        }
+      }
+      
+      /**
+       * 查看已绑定的企业微信
+       */
+      function seeBindWeChat() {
+        openBindModal(true,{ izBind: true })
+      }
+      
+      onMounted(() => {
+        let tenantId = getTenantId();
+        initThirdAppConfigData({ tenantId: tenantId, thirdType: 'wechat_enterprise' });
+      });
+
+      return {
+        appConfigData,
+        weEnterpriseEditClick,
+        registerAppConfigModal,
+        registerBindAppConfigModal,
+        handleSuccess,
+        btnLoading,
+        thirdUserByWechat,
+        handleBindSuccess,
+        seeBindWeChat,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .header {
+    align-items: center;
+    box-sizing: border-box;
+    display: flex;
+    height: 50px;
+    justify-content: space-between;
+    font-weight: 700;
+    font-size: 18px;
+  }
+
+  .flex-flow {
+    display: flex;
+    min-height: 0;
+  }
+
+  .sync-padding {
+    padding: 12px 0 16px;
+  }
+
+  .base-collapse {
+    margin-top: 20px;
+    padding: 0 24px;
+    font-size: 20px;
+
+    .base-desc {
+      font-size: 14px;
+    }
+
+    .base-title {
+      width: 100px;
+      text-align: left;
+      height: 50px;
+      line-height: 50px;
+    }
+
+    .base-message {
+      width: 100%;
+      height: 50px;
+      line-height: 50px;
+    }
+
+    :deep(.ant-collapse-header) {
+      padding: 12px 0 16px;
+    }
+
+    :deep(.ant-collapse-content-box) {
+      padding-left: 0;
+    }
+  }
+  /*begin 兼容暗夜模式*/
+  //暗黑模式下卡片的边框设置成none
+  [data-theme='dark'] .base-collapse .ant-collapse {
+    border: none !important;
+  }
+  /*end 兼容暗夜模式*/
+  /*文档按钮问号样式*/
+  .sync-text {
+    margin-left: 2px;
+    cursor: pointer;
+    position: relative;
+    top: 2px;
+  }
+</style>