n20-common-lib 2.1.26 → 2.1.28

package/src/components/LoginSetting/setItem.vue

@@ -1,142 +1,196 @@
 <!-- eslint-disable no-empty -->
 <template>
-  <div class="p-l-lg" style="overflow: auto">
-    <el-form ref="form" :model="form" class="m-l-lg" label-position="top">
-      <el-form-item
-        :label="'登录页URL' | $lc"
-        prop="LOGIN_URL"
-        :rules="{ required: true, message: $lc('登录页URL不能为空'), trigger: 'change' }"
-      >
-        <el-input v-model="form.LOGIN_URL" class="input-w-u" clearable />
-      </el-form-item>
-      <el-form-item
-        :label="'集团名称设置' | $lc"
-        prop="GROUP_NAME"
-        :rules="{ required: true, message: $lc('集团名称不能为空'), trigger: 'change' }"
-      >
-        <el-input v-model="form.GROUP_NAME" class="input-w-u" clearable />
-      </el-form-item>
-      <el-form-item :label="'登录首页文字显示信息' | $lc">
-        <el-input v-model="form.LOGIN_SLOGAN" type="textarea" class="input-w-u" rows="1" />
-      </el-form-item>
-      <el-form-item
-        :label="'登录背景图片设置' | $lc"
-        prop="LOGIN_BG"
-        :rules="{ required: true, message: $lc('登录背景图片不能为空'), trigger: 'change' }"
-      >
-        <div class="login-form-bg-box">
-          <img :key="key_1" class="login-preview" :src="form.LOGIN_BG" />
-          <div>
-            <div class="flex-box">
-              <span class="m-r">{{ '上传图片' | $lc }}</span>
-              <cl-upload
-                :action="`/bems/1.0/upload/${idNo}_bg`"
-                :file-url.sync="form.LOGIN_BG"
-                accept="image/*"
-                msg-type="message"
-                :placeholder="'选择附件' | $lc"
-                :on-success="() => (key_1 = key_1 + 1)"
+  <div style="overflow: auto">
+    <el-form ref="form" :model="form" label-position="top">
+      <cl-expandable-pane class="base-set" :title="'基本页面设置' | $lc" title-class="m-t-0">
+        <div style="padding-left: 48px; padding-right: 38px">
+          <el-form-item
+            :label="'登录页URL' | $lc"
+            prop="LOGIN_URL"
+            :rules="{ required: true, message: $lc('登录页URL不能为空'), trigger: 'change' }"
+          >
+            <el-input v-model="form.LOGIN_URL" class="input-w-u" clearable />
+          </el-form-item>
+          <el-form-item
+            :label="'集团名称设置' | $lc"
+            prop="GROUP_NAME"
+            :rules="{ required: true, message: $lc('集团名称不能为空'), trigger: 'change' }"
+          >
+            <el-input v-model="form.GROUP_NAME" class="input-w-u" clearable />
+          </el-form-item>
+          <el-form-item :label="'登录首页文字显示信息' | $lc" style="display: none">
+            <el-input v-model="form.LOGIN_SLOGAN" type="textarea" class="input-w-u" rows="1" />
+          </el-form-item>
+          <el-form-item
+            :label="'登录背景图片设置' | $lc"
+            prop="LOGIN_BG"
+            :rules="{ required: true, message: $lc('登录背景图片不能为空'), trigger: 'change' }"
+          >
+            <div class="login-form-bg-box">
+              <img
+                v-if="form.LOGIN_BG"
+                :key="key_1"
+                :src="form.LOGIN_BG"
+                class="login-preview"
+                onerror="imgLoad(this)"
               />
+              <img v-else src="./img-none.png" class="login-preview" />
+              <div>
+                <div class="flex-box">
+                  <span class="m-r">{{ '上传图片' | $lc }}</span>
+                  <cl-upload
+                    :action="`/bems/1.0/upload/${idNo}_bg`"
+                    :file-url.sync="form.LOGIN_BG"
+                    accept="image/*"
+                    :placeholder="'选择附件' | $lc"
+                    :on-success="
+                      () => {
+                        key_1 = key_1 + 1
+                        form.LOGIN_BG_TYPE = ''
+                      }
+                    "
+                  />
+                  <el-button
+                    class="m-l"
+                    type="primary"
+                    @click="
+                      () => {
+                        form.LOGIN_BG = '/portal/server-assets/loginBg.jpg'
+                        form.LOGIN_BG_TYPE = 'dark'
+                      }
+                    "
+                    >恢复默认</el-button
+                  >
+                </div>
+                <div class="color-placeholder f-s-s">
+                  {{ '建议图片尺寸' | $lc }}：1920*1080，{{ '支持图片格式' | $lc }}：png、jpg、bmp、svg。
+                </div>
+                <div>
+                  <el-form-item
+                    class="bg-type m-b-0"
+                    prop="LOGIN_BG_TYPE"
+                    :rules="{ required: true, message: $lc('背景模式不能为空'), trigger: 'change' }"
+                  >
+                    <label class="m-r"><span class="m-r-ss" style="color: var(--color-danger)">*</span>背景模式</label>
+                    <el-radio-group v-model="form.LOGIN_BG_TYPE">
+                      <el-radio label="dark">深色背景</el-radio>
+                      <el-radio label="light">浅色背景</el-radio>
+                    </el-radio-group>
+                  </el-form-item>
+                </div>
+              </div>
             </div>
-            <div class="color-placeholder f-s-s">
-              {{ '建议图片尺寸' | $lc }}：1920*1080，{{ '支持图片格式' | $lc }}：png、jpg、bmp、svg。
-            </div>
-          </div>
-        </div>
-      </el-form-item>
-      <el-form-item
-        :label="'公司LOGO图片设置' | $lc"
-        prop="LOGIN_LOGO"
-        :rules="{ required: true, message: $lc('公司LOGO图片不能为空'), trigger: 'change' }"
-      >
-        <div class="login-form-bg-box">
-          <img :key="key_1" class="login-preview" :src="form.LOGIN_LOGO" />
-          <div>
-            <div class="flex-box">
-              <span class="m-r">{{ '上传图片' | $lc }}</span>
-              <cl-upload
-                :action="`/bems/1.0/upload/${idNo}_logo`"
-                :file-url.sync="form.LOGIN_LOGO"
-                accept="image/*"
-                msg-type="message"
-                :placeholder="'选择附件' | $lc"
-                :on-success="() => (key_2 = key_2 + 1)"
+          </el-form-item>
+          <el-form-item
+            :label="'公司LOGO图片设置' | $lc"
+            prop="LOGIN_LOGO"
+            :rules="{ required: true, message: $lc('公司LOGO图片不能为空'), trigger: 'change' }"
+          >
+            <div class="login-form-bg-box">
+              <img
+                v-if="form.LOGIN_LOGO"
+                :key="key_1"
+                class="login-preview"
+                :src="form.LOGIN_LOGO"
+                onerror="imgLoad(this)"
               />
+              <img v-else src="./img-none.png" class="login-preview" />
+              <div>
+                <div class="flex-box">
+                  <span class="m-r">{{ '上传图片' | $lc }}</span>
+                  <cl-upload
+                    :action="`/bems/1.0/upload/${idNo}_logo`"
+                    :file-url.sync="form.LOGIN_LOGO"
+                    accept=".png,.svg"
+                    :placeholder="'选择附件' | $lc"
+                    :on-success="() => (key_2 = key_2 + 1)"
+                  />
+                </div>
+                <div class="color-placeholder f-s-s">
+                  {{ '建议图片尺寸' | $lc }}：100*100，{{ '支持图片格式' | $lc }}：png、svg。
+                </div>
+              </div>
             </div>
-            <div class="color-placeholder f-s-s">
-              {{ '建议图片尺寸' | $lc }}：108*30，{{ '支持图片格式' | $lc }}：png、jpg、bmp、svg。
-            </div>
+          </el-form-item>
+          <el-form-item :label="'系统启用设置' | $lc" required class="m-b-0" />
+          <div class="bd-l bd-t bd-r m-b">
+            <el-table :data="form.SYSTEM_LIST">
+              <el-table-column label="序号" align="center" width="100">
+                <span slot-scope="scope">{{ '0' + (scope.$index + 1) }}</span>
+              </el-table-column>
+              <el-table-column :label="'系统名称' | $lc" prop="NAME">
+                <el-input v-model="row.NAME" slot-scope="{ row }" clearable maxlength="64" />
+              </el-table-column>
+              <el-table-column :label="'是否启用' | $lc" align="center" width="120">
+                <el-switch v-model="row.OPEN" slot-scope="{ row }" />
+              </el-table-column>
+              <el-table-column :label="'操作' | $lc" align="center" width="120">
+                <el-button slot-scope="{ row }" type="text" size="mini" @click="resetSys(row)">{{
+                  '重置' | $lc
+                }}</el-button>
+              </el-table-column>
+            </el-table>
           </div>
+          <el-form-item
+            :label="'页面展示方式' | $lc"
+            prop="LOGIN_TYPE"
+            :rules="{ required: true, message: $lc('页面展示方式不能为空'), trigger: 'change' }"
+          >
+            <el-select v-model="form.LOGIN_TYPE" class="input-w-u">
+              <el-option :label="'左右切换' | $lc" value="T1" />
+              <el-option :label="'平铺展示' | $lc" value="T2" />
+            </el-select>
+          </el-form-item>
         </div>
-      </el-form-item>
+      </cl-expandable-pane>
 
-      <div class="bd-l bd-t bd-r m-t-lg m-b">
-        <el-table :data="form.SYSTEM_LIST">
-          <el-table-column :label="'系统名称' | $lc" prop="NAME" />
-          <el-table-column :label="'是否在登录页显示' | $lc" align="center">
-            <template slot-scope="{ row }">
-              <el-switch v-model="row.OPEN" />
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-      <el-form-item
-        :label="'页面展示方式' | $lc"
-        :rules="{ required: true, message: $lc('页面展示方式不能为空'), trigger: 'change' }"
-      >
-        <el-select v-model="form.LOGIN_TYPE" class="input-w-u">
-          <el-option :label="'左右切换' | $lc" value="T1" />
-          <el-option :label="'平铺展示' | $lc" value="T2" />
-        </el-select>
-      </el-form-item>
       <cl-expandable-pane :title="'系统详情设置' | $lc" title-class="m-t-0">
-        <template v-for="(systemItem, i) in form.SYSTEM_LIST">
-          <div v-if="systemItem.OPEN" :key="i">
-            <el-form-item
-              :label="'系统名称设置' | $lc"
-              :prop="`SYSTEM_LIST.${i}.NAME`"
-              :rules="{ required: true, message: $lc('系统名称不能为空'), trigger: 'change' }"
-            >
-              <el-input ref="sys-name" v-model="systemItem.NAME" class="input-w-u" clearable />
-            </el-form-item>
-            <el-form-item :label="'系统标识图片设置' | $lc" class="is-required">
-              <div class="login-form-bg-box">
-                <img :key="keyS[i]" class="login-preview" :src="systemItem | realUrl" />
-                <div>
-                  <div class="flex-box">
-                    <span class="m-r">{{ '上传图片' | $lc }}</span>
-                    <cl-upload
-                      :action="`/bems/1.0/upload/${idNo}_${systemItem.NO}_icon`"
-                      :file-url.sync="systemItem.ICON"
-                      accept="image/*"
-                      msg-type="message"
-                      :placeholder="'选择附件' | $lc"
-                      :on-success="() => (keyS[i] = keyS[i] + 1)"
-                    />
-                  </div>
-                  <div class="color-placeholder f-s-s">
-                    {{ '建议图片尺寸' | $lc }}：80*80，{{ '支持图片格式' | $lc }}：png、jpg、bmp、svg。
+        <div style="padding-left: 48px; padding-right: 38px">
+          <template v-for="(systemItem, i) in form.SYSTEM_LIST">
+            <div v-if="systemItem.OPEN" :key="i">
+              <div class="p-l m-b-m" style="line-height: 28px; background: rgba(0, 122, 255, 0.1)">
+                {{ '0' + (i + 1) }} {{ systemItem.NAME }}
+              </div>
+              <div style="padding-left: 48px">
+                <el-form-item :label="'系统标识图片设置' | $lc" class="is-required">
+                  <div class="login-form-bg-box">
+                    <img :key="keyS[i]" class="login-preview" :src="systemItem | realUrl" onerror="imgLoad(this)" />
+                    <div>
+                      <div class="flex-box">
+                        <span class="m-r">{{ '上传图片' | $lc }}</span>
+                        <cl-upload
+                          :action="`/bems/1.0/upload/${idNo}_${systemItem.NO}_icon`"
+                          :file-url.sync="systemItem.ICON"
+                          accept=".png,.svg"
+                          :placeholder="'选择附件' | $lc"
+                          :on-success="() => (keyS[i] = keyS[i] + 1)"
+                        />
+                      </div>
+                      <div class="color-placeholder f-s-s">
+                        {{ '建议图片尺寸' | $lc }}：180*120，{{ '支持图片格式' | $lc }}：png、svg。
+                      </div>
+                    </div>
                   </div>
-                </div>
+                </el-form-item>
+                <el-form-item
+                  :label="'登录方式设置' | $lc"
+                  :prop="`SYSTEM_LIST.${i}.LOGIN_MODE`"
+                  :rules="{ type: 'array', required: true, message: $lc('至少选择一种登录方式'), trigger: 'change' }"
+                >
+                  <span slot="label"
+                    ><span>{{ '登录方式设置' | $lc }}</span
+                    ><span class="color-danger m-l-s f-s-s">({{ $lc('至少选择一种登录方式') | $lc }})</span></span
+                  >
+                  <el-checkbox-group v-model="systemItem.LOGIN_MODE">
+                    <el-checkbox v-for="item in plainOptions" :key="item.value" :label="item.value">{{
+                      item.label
+                    }}</el-checkbox>
+                  </el-checkbox-group>
+                </el-form-item>
               </div>
-            </el-form-item>
-            <el-form-item
-              :label="'登录方式设置' | $lc"
-              :prop="`SYSTEM_LIST.${i}.LOGIN_MODE`"
-              :rules="{ type: 'array', required: true, message: $lc('至少选择一种登录方式'), trigger: 'change' }"
-            >
-              <span slot="label"
-                ><span>{{ '登录方式设置' | $lc }}</span
-                ><span class="color-danger m-l-s f-s-s">({{ $lc('至少选择一种登录方式') | $lc }})</span></span
-              >
-              <el-checkbox-group v-model="systemItem.LOGIN_MODE">
-                <el-checkbox v-for="item in plainOptions" :key="item.value" :label="item.value">{{
-                  item.label
-                }}</el-checkbox>
-              </el-checkbox-group>
-            </el-form-item>
-          </div>
-        </template>
+            </div>
+          </template>
+        </div>
       </cl-expandable-pane>
     </el-form>
     <div class="fixed-button-shadow flex-box flex-c flex-v">
@@ -150,6 +204,8 @@
 import { $lc } from '../../utils/i18n/index'
 import realUrl from '../../assets/realUrl'
 import IconMap from '../LoginTemporary/systemIconMap'
+import imgLoad from '../../utils/imgLoad'
+window.imgLoad = imgLoad
 
 export default {
   filters: {
@@ -176,6 +232,7 @@ export default {
         GROUP_NAME: '',
         LOGIN_SLOGAN: '',
         LOGIN_BG: '',
+        LOGIN_BG_TYPE: 'dark',
         LOGIN_LOGO: '',
         LOGIN_TYPE: 'T1',
         SYSTEM_LIST: [
@@ -250,6 +307,7 @@ export default {
     }
   },
   created() {
+    this.SYSTEM_LIST_O = JSON.parse(JSON.stringify(this.form.SYSTEM_LIST))
     this.Init()
   },
   activated() {
@@ -296,7 +354,9 @@ export default {
     sltRow(row) {
       this.systemItem = row
     },
-
+    resetSys(row) {
+      row.NAME = this.SYSTEM_LIST_O.find((c) => (c.NO = row.NO))?.NAME || ''
+    },
     async save() {
       let vPro = this.$refs['form'].validate()
       vPro.catch(() => {
@@ -354,8 +414,12 @@ export default {
 </script>
 
 <style scoped>
-.el-form ::v-deep .el-form-item__label {
+.base-set ::v-deep .el-form-item__label {
   font-size: 16px;
+  font-weight: 500;
+}
+.bg-type ::v-deep .el-form-item__label {
+  padding-bottom: 0;
 }
 .input-w-u {
   width: 430px;
@@ -365,9 +429,10 @@ export default {
   align-items: flex-end;
 }
 .login-preview {
-  width: 125px;
-  height: 125px;
+  width: 120px;
+  height: 120px;
   margin-right: 16px;
+  border-radius: 4px;
 }
 .login-preview:hover {
   background: rgba(0, 0, 0, 0.1);

package/src/components/LoginTemporary/form.vue

@@ -257,6 +257,7 @@ export default {
     },
     getImgCode() {
       if (this.theType === 'account') {
+        this.$set(this.form, 'imageCode', '')
         this.imageUrl && URL.revokeObjectURL(this.imageUrl)
         axios.get('/bems/prod_1.0/uas/api/authorization/captcha/image', null, { responseType: 'blob' }).then((blob) => {
           this.imageUrl = URL.createObjectURL(blob)
@@ -373,7 +374,7 @@ export default {
       await this.authorizationCode(username, password, code)
       // 请求该账号要不要强制验证码登录
       this.loadingAdd()
-      let cL = await axios.post(
+      let cLPro = axios.post(
         '/bems/prod_1.0/uas/api/authorization/checkLogin',
         {
           grantType: 'password',
@@ -387,6 +388,9 @@ export default {
         }
       )
 
+      cLPro.catch(this.getImgCode)
+      let cL = await cLPro
+
       // 输入验证码
       if (cL.data === true) {
         this.theType = 'accountPthon'
@@ -396,9 +400,13 @@ export default {
       } else if (cL.data === false /* 签名验签 */) {
         // 获取线上签名uDn
         this.loadingAdd()
-        let uDn = await axios.get(`/bems/prod_1.0/dssc/sign/getUserDn/${username}/password`, null, {
+        let uDnPro = axios.get(`/bems/prod_1.0/dssc/sign/getUserDn/${username}/password`, null, {
           loading: this.loadingSub
         })
+
+        uDnPro.catch(this.getImgCode)
+        let uDn = await uDnPro
+
         let { checkCert, userDn, supplier } = uDn.data
         // 走本地签名
         let sign = undefined
@@ -410,7 +418,11 @@ export default {
         if (checkCert) {
           this.loadingAdd()
           let { getSign } = await import('../../plugins/Sign')
-          sign = await getSign(username + userDn, userDn)
+          let signPro = getSign(username + userDn, userDn)
+
+          uDnPro.catch(this.getImgCode)
+          sign = await signPro
+
           this.loadingSub()
           certDn = userDn
         }
@@ -438,6 +450,7 @@ export default {
           .then((res) => {
             this.loginAfter(res.data)
           })
+          .catch(this.getImgCode)
 
         return
       }