瀏覽代碼

1、登录页自定义图片修改

dongjh 7 月之前
父節點
當前提交
09a1c2bd05

+ 52 - 0
src/assets/less/interLock.css

@@ -278,6 +278,58 @@
 .iotmenu-modal-box .ant-table .copy-btn:hover {
   background: url(../copy-hover.svg);
 }
+.iotmenu-content-container .ant-table .status-btn,
+.iotmenu-modal-box .ant-table .status-btn {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  margin: 4px 3px;
+  cursor: pointer;
+  background: url(../status.svg);
+}
+.iotmenu-content-container .ant-table .status-btn:hover,
+.iotmenu-modal-box .ant-table .status-btn:hover {
+  background: url(../status-hover.svg);
+}
+.iotmenu-content-container .ant-table .status-btn,
+.iotmenu-modal-box .ant-table .status-btn {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  margin: 4px 3px;
+  cursor: pointer;
+  background: url(../status.svg);
+}
+.iotmenu-content-container .ant-table .status-btn:hover,
+.iotmenu-modal-box .ant-table .status-btn:hover {
+  background: url(../status-hover.svg);
+}
+.iotmenu-content-container .ant-table .status-btn,
+.iotmenu-modal-box .ant-table .status-btn {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  margin: 4px 3px;
+  cursor: pointer;
+  background: url(../status.svg);
+}
+.iotmenu-content-container .ant-table .status-btn:hover,
+.iotmenu-modal-box .ant-table .status-btn:hover {
+  background: url(../status-hover.svg);
+}
+.iotmenu-content-container .ant-table .status-btn,
+.iotmenu-modal-box .ant-table .status-btn {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  margin: 4px 3px;
+  cursor: pointer;
+  background: url(../status.svg);
+}
+.iotmenu-content-container .ant-table .status-btn:hover,
+.iotmenu-modal-box .ant-table .status-btn:hover {
+  background: url(../status-hover.svg);
+}
 .iotmenu-content-container .ant-table .delete-btn,
 .iotmenu-modal-box .ant-table .delete-btn {
   display: inline-block;

+ 11 - 0
src/assets/less/interLock.less

@@ -248,6 +248,17 @@
     .copy-btn:hover{
       background: url(../copy-hover.svg);
     }
+    .status-btn{
+      display: inline-block;
+      width: 24px;
+      height: 24px;
+      margin: 4px 3px;
+      cursor: pointer;
+      background: url(../status.svg);
+    }
+    .status-btn:hover{
+      background: url(../status-hover.svg);
+    }
     .delete-btn{
       display: inline-block;
       width: 24px;

File diff suppressed because it is too large
+ 1 - 0
src/assets/status-hover.svg


File diff suppressed because it is too large
+ 1 - 0
src/assets/status.svg


+ 9 - 8
src/components/layouts/UserLayout.vue

@@ -40,7 +40,7 @@
           backPic: require('@/assets/login.png'),
           companyCopyright: '© 1983-2024 Advantech Co., Ltd.',
         },
-        url: '/interlockLoginConfig/interlockLoginConfig/list'
+        url: '/interlockLoginConfig/interlockLoginConfig/queryLoginConfig'
       }
     },
     mounted () {
@@ -55,13 +55,14 @@
     methods: {
       getLoginConfig(){
         getAction(this.url).then(res=>{
-          console.log(res.result.records[0])
-          this.loginConfig.logoPic = res.result.records[0].logoPic ? window._CONFIG['staticDomainURL'] + "/" + res.result.records[0].logoPic : require('@/assets/logo.png')
-          this.loginConfig.backPic = res.result.records[0].backPic ? window._CONFIG['staticDomainURL'] + "/" +  res.result.records[0].backPic : require('@/assets/login.png')
-          this.loginConfig.companyCopyright = res.result.records[0].companyCopyright ? res.result.records[0].companyCopyright : '© 1983-2024 Advantech Co., Ltd.'
-          this.loginConfig.companyUrl = res.result.records[0].companyUrl
-          this.loginConfig.companyAddress = res.result.records[0].companyAddress
-          this.loginConfig.companyTelephone = res.result.records[0].companyTelephone
+          console.log(res.result[0])
+          this.loginConfig.logoPic = res.result[0].logoPic ? window._CONFIG['staticDomainURL'] + "/" + res.result[0].logoPic : require('@/assets/logo.png')
+          this.loginConfig.backPic = res.result[0].backPic ? window._CONFIG['staticDomainURL'] + "/" +  res.result[0].backPic : require('@/assets/login.png')
+          this.loginConfig.companyCopyright = res.result[0].companyCopyright ? res.result.companyCopyright : '© 1983-2024 Advantech Co., Ltd.'
+          this.loginConfig.companyUrl = res.result[0].companyUrl
+          this.loginConfig.companyAddress = res.result[0].companyAddress
+          this.loginConfig.companyTelephone = res.result[0].companyTelephone
+          console.log("loginConfig",this.loginConfig)
         })
       }
     },

+ 73 - 18
src/views/module_interLock/loginConfig/LoginConfigList.vue

@@ -5,6 +5,15 @@
       <span>登录配置</span>
     </div>
     <a-card :bordered="false" class="iotmenu-content">
+      <!-- 查询区域 -->
+      <div class="table-page-search-wrapper">
+          <div class="iotmenu-search-container">
+            <div class="item-search-btn">
+              <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
+            </div>
+          </div>
+      </div>
+      <!-- 查询区域-END -->
       <div>
         <a-table
           ref="table"
@@ -24,8 +33,7 @@
           </template>
           <template slot="imgSlot" slot-scope="text,record">
             <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
-            <img v-if="isDefault && text" :src="text" :preview="record.id" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
-            <img v-if="!isDefault && text" :src="getImgView(text)" :preview="record.id" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
+            <img v-if="text" :src="getImgView(text)" :preview="record.id" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
           </template>
           <template slot="fileSlot" slot-scope="text">
             <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
@@ -40,11 +48,35 @@
             </a-button>
           </template>
 
+          <!-- 状态渲染模板 -->
+          <template slot="customRenderStatus" slot-scope="status">
+            <a-tag v-if="status==0" color="green">启用</a-tag>
+            <a-tag v-if="status==1" color="orange">禁用</a-tag>
+          </template>
+
           <span slot="action" slot-scope="text, record">
             <a-tooltip style="margin-right: 10px;">
               <template slot="title"> 设置 </template>
               <span class="edit-btn" @click="handleEdit(record)"></span>
             </a-tooltip>
+            <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
+              <a-tooltip>
+                <template slot="title"> 删除 </template>
+                <span class="delete-btn"></span>
+              </a-tooltip>
+            </a-popconfirm>
+            <a-popconfirm v-if="record.status==='0'" title="确定禁用吗?" @confirm="() => handleStatus(record.id,1)">
+              <a-tooltip>
+                <template slot="title"> 禁用 </template>
+                <span class="copy-btn"></span>
+              </a-tooltip>
+            </a-popconfirm>
+            <a-popconfirm v-if="record.status==='1'" title="确定启用吗?" @confirm="() => handleStatus(record.id,0)">
+              <a-tooltip>
+                <template slot="title"> 启用 </template>
+                <span class="copy-btn"></span>
+              </a-tooltip>
+            </a-popconfirm>
           </span>
 
         </a-table>
@@ -60,7 +92,7 @@
   import '@/assets/less/TableExpand.less'
   import { mixinDevice } from '@/utils/mixin'
   import { JeecgListMixin } from '@/mixins/JeecgListMixin'
-  import { getAction } from '@/api/manage'
+  import { getAction, postAction } from '@/api/manage'
   import LoginConfigModal from './modules/LoginConfigModal'
 
   export default {
@@ -72,7 +104,7 @@
     data () {
       return {
         description: '联锁登陆页配置表管理页面',
-        isDefault: true,
+        // isDefault: true,
         // 表头
         columns: [
           // {
@@ -118,6 +150,12 @@
             dataIndex: 'companyCopyright'
           },
           {
+            title:'状态',
+            align:"center",
+            dataIndex: 'status',
+            scopedSlots: { customRender: 'customRenderStatus' },
+          },
+          {
             title: '操作',
             dataIndex: 'action',
             align:"center",
@@ -128,7 +166,8 @@
         ],
         url: {
           list: "/interlockLoginConfig/interlockLoginConfig/list",
-          // delete: "/jeecg-boot/interlockLoginConfig/interlockLoginConfig/delete",
+          delete: "/interlockLoginConfig/interlockLoginConfig/delete",
+          editStatus: "/interlockLoginConfig/interlockLoginConfig/editStatus",
           // deleteBatch: "/loginConfig/loginConfig/deleteBatch",
           // exportXlsUrl: "/loginConfig/loginConfig/exportXls",
           // importExcelUrl: "loginConfig/loginConfig/importExcel",
@@ -162,18 +201,21 @@
           if (res.success) {
             //update-begin---author:zhangyafei    Date:20201118  for:适配不分页的数据列表------------
             var data = res.result.records||res.result
-            if(data.length === 0){
-              this.isDefault = true
-              this.dataSource.push({
-                id: 'defalut001',
-                logoPic: require('@/assets/logo.png'),
-                backPic: require('@/assets/login.png'),
-                companyCopyright: '© 1983-2024 Advantech Co., Ltd.',
-              })
-            } else {
-              this.isDefault = false
-              this.dataSource = data
-            }
+            // if(data.length === 0){
+            //   this.isDefault = true
+            //   this.dataSource.push({
+            //     id: 'defalut001',
+            //     logoPic: require('@/assets/logo.png'),
+            //     backPic: require('@/assets/login.png'),
+            //     companyCopyright: '© 1983-2024 Advantech Co., Ltd.',
+            //   })
+            // } else {
+            //   this.isDefault = false
+            //   this.dataSource = data
+            // }
+            // this.isDefault = false
+            console.log("data", data)
+            this.dataSource = data
             if(res.result.total)
             {
               this.ipagination.total = res.result.total;
@@ -192,7 +234,20 @@
         this.$refs.modalForm.edit(record);
         this.$refs.modalForm.title = "编辑";
         this.$refs.modalForm.disableSubmit = false;
-        this.$refs.modalForm.isDefault = this.isDefault;
+      },
+      handleStatus(id, status) {
+        this.loading = true;
+        var params = {id: id, status: status};//查询条件
+        console.log("params", params)
+        postAction(this.url.editStatus, params).then((res) => {
+          if (res.success) {
+            this.loadData()
+          }else{
+            this.$message.warning(res.message)
+          }
+        }).finally(() => {
+          this.loading = false
+        })
       },
       initDictConfig(){
       },

+ 45 - 41
src/views/module_interLock/loginConfig/modules/LoginConfigForm.vue

@@ -5,23 +5,24 @@
         <a-row>
           <a-col :span="24">
             <a-form-model-item label="logo图片" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="logoPic">
-              <!-- 为了不改变原jeecg的组件,所以单独写了一个 -->
-              <template v-if="isDefaultLogoPic">
-                <default-image-upload :url="model.logoPic" @remove="removeLogoPic"></default-image-upload>
-              </template>
-              <template v-else>
-                <j-image-upload  v-model="model.logoPic"></j-image-upload>
-              </template>
+              <j-image-upload v-model="model.logoPic"></j-image-upload>
             </a-form-model-item>
           </a-col>
           <a-col :span="24">
             <a-form-model-item label="背景图片" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="backPic">
-              <template v-if="isDefaultBackPic">
-                <default-image-upload :url="model.backPic" @remove="removeBackPic"></default-image-upload>
-              </template>
-              <template v-else>
-                <j-image-upload  v-model="model.backPic"></j-image-upload>
-              </template>
+              <j-image-upload  v-model="model.backPic"></j-image-upload>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="24">
+            <a-form-model-item
+              :labelCol="labelCol"
+              :wrapperCol="wrapperCol"
+               prop="status"
+              label="状态">
+              <a-radio-group buttonStyle="solid" v-model="model.status">
+                <a-radio-button value="1">禁用</a-radio-button>
+                <a-radio-button value="0">启用</a-radio-button>
+              </a-radio-group>
             </a-form-model-item>
           </a-col>
           <a-col :span="24">
@@ -69,17 +70,19 @@
         required: false
       },
       // 是否是默认值状态
-      isDefault: {
-        type: Boolean,
-        default: true,
-      },
+      // isDefault: {
+      //   type: Boolean,
+      //   default: true,
+      // },
     },
     data () {
       return {
         model:{
           logoPic: '',
           backPic: '',
-          companyCopyright: '© 1983-2024 Advantech Co., Ltd.'
+          // companyCopyright: '© 1983-2024 Advantech Co., Ltd.'
+          companyCopyright: '',
+          status: "0",
         },
         labelCol: {
           xs: { span: 24 },
@@ -107,8 +110,8 @@
           // queryById: "/loginConfig/loginConfig/queryById"
         },
         // 是否已经改变图片状态为非默认值状态
-        isDefaultLogoPic: true,
-        isDefaultBackPic: true,
+        // isDefaultLogoPic: true,
+        // isDefaultBackPic: true,
       }
     },
     computed: {
@@ -118,33 +121,34 @@
     },
     created () {
        //备份model原始值
-      this.modelDefault = JSON.parse(JSON.stringify(this.model));
+      // this.modelDefault = JSON.parse(JSON.stringify(this.model));
     },
     methods: {
       // 删除默认图片后转换格式
-      removeLogoPic(){
-        this.model.logoPic = ''
-        this.isDefaultLogoPic = false
-      },
-      removeBackPic(){
-        this.model.backPic = ''
-        this.isDefaultBackPic = false
-      },
+      // removeLogoPic(){
+      //   this.model.logoPic = require('@/assets/logo.png'),
+      //   this.isDefaultLogoPic = true
+      // },
+      // removeBackPic(){
+      //   this.model.backPic = require('@/assets/login.png'),
+      //   this.isDefaultBackPic = true
+      // },
       add () {
-        this.edit(this.modelDefault);
+        this.edit(this.model);
       },
       edit (record) {
-        this.isDefaultBackPic = this.isDefault
-        this.isDefaultLogoPic = this.isDefault
-        if(this.isDefault){
-          this.model = {
-            logoPic: require('@/assets/logo.png'),
-            backPic: require('@/assets/login.png'),
-            companyCopyright: '© 1983-2024 Advantech Co., Ltd.',
-          }
-        } else {
-          this.model = Object.assign({}, record);
-        }
+        // this.isDefaultBackPic = this.isDefault
+        // this.isDefaultLogoPic = this.isDefault
+        // if(this.isDefault){
+        //   this.model = {
+        //     logoPic: require('@/assets/logo.png'),
+        //     backPic: require('@/assets/login.png'),
+        //     companyCopyright: '© 1983-2024 Advantech Co., Ltd.',
+        //   }
+        // } else {
+        //   this.model = Object.assign({}, record);
+        // }
+        this.model = Object.assign({}, record);
         this.visible = true;
       },
       submitForm () {