登录页面设置为空时，新增列表显示效果

src/views/module_interLock/loginConfig/LoginConfigList.vue

@@ -24,7 +24,8 @@
           </template>
           <template slot="imgSlot" slot-scope="text,record">
             <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
-            <img v-else :src="getImgView(text)" :preview="record.id" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
+            <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;"/>
           </template>
           <template slot="fileSlot" slot-scope="text">
             <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
@@ -59,6 +60,7 @@
   import '@/assets/less/TableExpand.less'
   import { mixinDevice } from '@/utils/mixin'
   import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+  import { getAction } from '@/api/manage'
   import LoginConfigModal from './modules/LoginConfigModal'
 
   export default {
@@ -70,6 +72,7 @@
     data () {
       return {
         description: '联锁登陆页配置表管理页面',
+        isDefault: true,
         // 表头
         columns: [
           // {
@@ -144,6 +147,53 @@
       },
     },
     methods: {
+      loadData(arg) {
+        if(!this.url.list){
+          this.$message.error("请设置url.list属性!")
+          return
+        }
+        //加载数据 若传入参数1则加载第一页的内容
+        if (arg === 1) {
+          this.ipagination.current = 1;
+        }
+        var params = this.getQueryParams();//查询条件
+        this.loading = true;
+        getAction(this.url.list, params).then((res) => {
+          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(res.result.total)
+            {
+              this.ipagination.total = res.result.total;
+            }else{
+              this.ipagination.total = 0;
+            }
+            //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
+          }else{
+            this.$message.warning(res.message)
+          }
+        }).finally(() => {
+          this.loading = false
+        })
+      },
+      handleEdit(record) {
+        this.$refs.modalForm.edit(record);
+        this.$refs.modalForm.title = "编辑";
+        this.$refs.modalForm.disableSubmit = false;
+        this.$refs.modalForm.isDefault = this.isDefault;
+      },
       initDictConfig(){
       },
       getSuperFieldList(){

src/views/module_interLock/loginConfig/modules/DefaultImageUpload.vue

@@ -0,0 +1,83 @@
+<template>
+  <div>
+    <a-upload
+      list-type="picture-card"
+      :file-list="fileList"
+      :remove="remove"
+      @preview="handlePreview"
+      @change="handleChange"
+    >
+      <div v-if="fileList.length < 1" class="iconp">
+        <a-icon type="plus" />
+        <div class="ant-upload-text">
+          上传
+        </div>
+      </div>
+    </a-upload>
+    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
+      <img alt="example" style="width: 100%" :src="previewImage" />
+    </a-modal>
+  </div>
+</template>
+
+<script>
+export default {
+  name: '',
+  props: {
+    url:{
+      default: ''
+    }
+  },
+  data () {
+    return {
+      previewVisible: false,
+      previewImage: '',
+      fileList: [
+        {
+          uid: '-1',
+          name: 'image.png',
+          status: 'done',
+          url: '',
+        }
+      ]
+    }
+  },
+  created () {
+  },
+  mounted () {
+  },
+  watch: {
+    url:{
+      handler(newVal,oldValue) {
+        console.log(newVal)
+        this.fileList[0].url = newVal
+      },
+      //立刻执行handler
+      immediate: true
+    }
+  },
+  methods: {
+    remove(e){
+      this.$emit('remove')
+    },  
+    handleCancel() {
+      this.previewVisible = false;
+    },
+    async handlePreview(file) {
+      if (!file.url && !file.preview) {
+        file.preview = await getBase64(file.originFileObj);
+      }
+      this.previewImage = file.url || file.preview;
+      this.previewVisible = true;
+    },
+    handleChange({ fileList }) {
+      this.fileList = fileList;
+    },
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  // /deep/ .imgupload .iconp{padding:20px;}
+  // /deep/ .image-upload-single-over .ant-upload-select{display: none}
+</style>

src/views/module_interLock/loginConfig/modules/LoginConfigForm.vue

@@ -5,12 +5,23 @@
         <a-row>
           <a-col :span="24">
             <a-form-model-item label="logo图片" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="logoPic">
-              <j-image-upload  v-model="model.logoPic" ></j-image-upload>
+              <!-- 为了不改变原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>
             </a-form-model-item>
           </a-col>
           <a-col :span="24">
             <a-form-model-item label="背景图片" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="backPic">
-              <j-image-upload  v-model="model.backPic" ></j-image-upload>
+              <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>
             </a-form-model-item>
           </a-col>
           <a-col :span="24">
@@ -43,10 +54,12 @@
 
   import { httpAction, getAction } from '@/api/manage'
   import { validateDuplicateValue } from '@/utils/util'
+  import DefaultImageUpload from './DefaultImageUpload.vue'
 
   export default {
     name: 'LoginConfigForm',
     components: {
+      DefaultImageUpload
     },
     props: {
       //表单禁用
@@ -54,7 +67,12 @@
         type: Boolean,
         default: false,
         required: false
-      }
+      },
+      // 是否是默认值状态
+      isDefault: {
+        type: Boolean,
+        default: true,
+      },
     },
     data () {
       return {
@@ -87,7 +105,10 @@
           add: "/interlockLoginConfig/interlockLoginConfig/add",
           edit: "/interlockLoginConfig/interlockLoginConfig/edit",
           // queryById: "/loginConfig/loginConfig/queryById"
-        }
+        },
+        // 是否已经改变图片状态为非默认值状态
+        isDefaultLogoPic: true,
+        isDefaultBackPic: true,
       }
     },
     computed: {
@@ -100,11 +121,30 @@
       this.modelDefault = JSON.parse(JSON.stringify(this.model));
     },
     methods: {
+      // 删除默认图片后转换格式
+      removeLogoPic(){
+        this.model.logoPic = ''
+        this.isDefaultLogoPic = false
+      },
+      removeBackPic(){
+        this.model.backPic = ''
+        this.isDefaultBackPic = false
+      },
       add () {
         this.edit(this.modelDefault);
       },
       edit (record) {
-        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.visible = true;
       },
       submitForm () {

src/views/module_interLock/loginConfig/modules/LoginConfigModal.vue

@@ -8,7 +8,7 @@
     :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
     @cancel="handleCancel"
     cancelText="关闭">
-    <login-config-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit"></login-config-form>
+    <login-config-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit" :isDefault="isDefault"></login-config-form>
   </j-modal>
 </template>
 
@@ -25,7 +25,8 @@
         title:'',
         width:800,
         visible: false,
-        disableSubmit: false
+        disableSubmit: false,
+        isDefault: true,
       }
     },
     methods: {