banner等管理页面

_web/.env

@@ -1,3 +1,5 @@
NODE_ENV=production
VUE_APP_PREVIEW=true
VUE_APP_API_BASE_URL=http://127.0.0.1:82
VUE_APP_API_BASE_URL=http://127.0.0.1:82
VUE_APP_IMG_UPLOAD_URL=http://120.41.253.95:3000
imgServer=http://www.xmtyw.cn/

_web/.env.development

@@ -1,3 +1,5 @@
NODE_ENV=development
VUE_APP_PREVIEW=true
VUE_APP_API_BASE_URL=http://127.0.0.1:82
VUE_APP_API_BASE_URL=http://172.26.0.30:8080/
VUE_APP_IMG_UPLOAD_URL=http://120.41.253.95:3000
imgServer=http://172.26.0.110:8888/

_web/.eslintrc.js

@@ -71,5 +71,8 @@ module.exports = {
        jest: true
      }
    }
  ]
  ],
  "globals": {
    "hasPerm": true  //xxxx -> 报错的变量
  }
}

_web/package.json

@@ -34,6 +34,7 @@
    "vue-clipboard2": "^0.2.1",
    "vue-codemirror-lite": "^1.0.4",
    "vue-cropper": "0.4.9",
    "vue-eslint-parser": "^7.1.1",
    "vue-ls": "^3.2.1",
    "vue-quill-editor": "^3.0.6",
    "vue-router": "^3.1.2",

_web/src/api/homeApi.js

@@ -0,0 +1,144 @@
import { axios } from '@/utils/request'
const homeApi = {
  // 查看banner（列表）
  findBannerById (parameter) {
    return axios({
      url: '/zjxl/banner/findBannerById',
      method: 'get',
      params: parameter
    })
  },
  // 添加banner
  addBanner (data) {
    return axios({
      url: '/zjxl/banner/addBanner',
      method: 'post',
      data: data
    })
  },
  // 更新banner
  updateBanner (data) {
    return axios({
      url: '/zjxl/banner/updateBanner',
      method: 'post',
      data: data
    })
  },
  // 修改banner上下线状态
  updateIsLinebanner (data) {
    return axios({
      url: '/zjxl/banner/updateIsLine',
      method: 'post',
      data: data
    })
  },
  // 删除banner
  deleteBannerById (data) {
    return axios({
      url: '/zjxl/banner/deleteBannerById',
      method: 'post',
      data: data
    })
  },
  // 添加公司案例
  addCompanyCase (data) {
    return axios({
      url: '/zjxl/CompanyCase/addCompanyCase',
      method: 'post',
      data: data
    })
  },
  // 更新公司案例
  updateCompanyCase (data) {
    return axios({
      url: '/zjxl/CompanyCase/updateCompanyCase',
      method: 'post',
      data: data
    })
  },
  // 查看公司案例（列表）
  findCompanyCaseById (parameter) {
    return axios({
      url: '/zjxl/CompanyCase/findCompanyCaseById',
      method: 'get',
      params: parameter
    })
  },
  // 修改公司案例上下线状态
  updateIsLineCompanyCase (data) {
    return axios({
      url: '/zjxl/CompanyCase/updateIsLine',
      method: 'post',
      data: data
    })
  },
  // 删除公司案例
  deleteCompanyCase (data) {
    return axios({
      url: '/zjxl/CompanyCase/deleteCompanyCase',
      method: 'post',
      data: data
    })
  },
  // 添加合作伙伴
  addPartenr (data) {
    return axios({
      url: '/zjxl/partner/addPartenr',
      method: 'post',
      data: data
    })
  },
  // 查看合作伙伴（列表）
  findPartenrById (parameter) {
    return axios({
      url: '/zjxl/partner/findPartenrById',
      method: 'get',
      params: parameter
    })
  },
  // 修改合作伙伴
  updatePartner (data) {
    return axios({
      url: '/zjxl/partner/updatePartner',
      method: 'post',
      data: data
    })
  },
  // 修改合作伙伴上下线状态
  updateIsLinePartner (data) {
    return axios({
      url: '/zjxl/partner/updateIsLine',
      method: 'post',
      data: data
    })
  },
  // 删除合作伙伴
  deletePartner (data) {
    return axios({
      url: '/zjxl/partner/deletePartner',
      method: 'post',
      data: data
    })
  },
  // 获取文章列表
  findArticleContentById (parameter) {
    return axios({
      url: '/zjxl/zjxlArticleContent/findArticleContentById',
      method: 'get',
      params: parameter
    })
  },
  // 文件上传
  fileUpload (data, token) {
    return axios({
      url: '/zjxl/banner/file',
      method: 'post',
      headers: {
        'Authorization': token
      },
      data: data
    })
  }
}
export default homeApi

_web/src/components/global.less

@@ -512,3 +512,62 @@ body {
    }
  }
}
.flex{
  display:-webkit-box;
  display:-webkit-flex;
  display:flex;
}
/* 垂直排列 */
.flex_co{
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
}
/*  垂直水平居中 */ 
.f_xy_c{    
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}
.f_y_c{
  -webkit-align-items: center;
  align-items: center;
}
.f_x_c{
  -webkit-justify-content: center;
  justify-content: center;
}
/* 存在剩余空间放大 */
.f_g_1{
  -webkit-flex-grow:1;
  flex-grow:1;
}
/* 空间不够也不缩小 */
.f_s_0{
  -webkit-flex-shrink:0;
  flex-shrink:0;
}
.f_x_s{
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.f_y_s{
  align-items: flex-start;
  -webkit-align-items: flex-start;
}
.f_wrap{
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.ellipsis{
  white-space:nowrap;/*强制文本在一行内显示*/
  text-overflow:ellipsis; /*溢出省略号，支持ie、safari（webkit）*/
  -o-text-overflow:ellipsis; /*溢出省略号，支持opera*/
  overflow:hidden;/*溢出隐藏*/
}

_web/src/components/upLoad.vue

@@ -0,0 +1,129 @@
<template>
  <div>
    <div class="flex flex-wrap">
      <a-upload
        :action="UploadUrl()"
        list-type="picture-card"
        :file-list="fileList"
        @preview="handlePreview"
        :before-upload="beforeUpload"
        @change="handleChange"
        :headers="headers"
      >
        <div v-if="fileList.length < fileListLength">
          <a-icon type="plus" />
        </div>
      </a-upload>
      <div class="remarkTxt" v-if="remarkTxt">
        {{ remarkTxt }}
      </div>
    </div>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </div>
</template>
<script>
// import homeApi from '@/api/homeApi'
import { setImgUrl } from '@/utils/img'
function getBase64 (file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = error => reject(error)
  })
}
export default {
  props: {
    remarkTxt: {
      type: String,
      default: ''
    },
    fileListLength: {
      type: Number,
      default: 1
    }
  },
  data () {
    return {
      loading: false,
      previewImage: '',
      previewVisible: false,
      fileList: [],
      headers: {
        Authorization: this.$store.getters.token
      }
    }
  },
  methods: {
    initData (imglist) {
      if (imglist && imglist.length) {
        this.fileList = imglist.map((item, index) => {
          return { url: setImgUrl(item) }
        })
      }
    },
    UploadUrl () {
      return (
         process.env.VUE_APP_API_BASE_URL + '/zjxl/banner/file'
      )
    },
    handleChange ({ file, fileList }) {
      // this.handleAvatarSuccess (file)
      this.fileList = fileList
      // this.$emit('uploadSuccess', { fileList: this.fileList })
    },
    async handlePreview (file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj)
      }
      this.previewImage = file.url || file.preview
      this.previewVisible = true
    },
    handleAvatarSuccess (res) {
      if (res.status === 200) {
        var imageUrl = process.env.imgServer + res.data
        this.currentImage = imageUrl
        this.$emit('imageUrlGet', res.data)
      } else {
        this.$message.error(res.msg)
      }
    },
    beforeUpload (file) {
      var $uptypes = ['image/jpg', 'image/png', 'image/jpeg']
      const isJPG = $uptypes.indexOf(file.type) > -1
      const isLt1M = file.size / 1024 / 1024 < 5
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 jpg、jpeg、png 格式!')
      }
      if (!isLt1M) {
        this.$message.error('上传头像图片大小不能超过 5MB!')
      }
      return isJPG && isLt1M
    },
    handleCancel () {
      this.previewVisible = false
    }
  }
}
</script>
<style lang="less" scoped>
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}
.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
.ant-upload-picture-card-wrapper{
  width:auto;
}
.remarkTxt{
  margin-top: 70px;
}
</style>

_web/src/config/router.config.js

@@ -76,7 +76,40 @@ export const constantRouterMap = [
      }
    ]
  },
  {
    path: '/',
    name: 'MenuIndex.vue',
    component: BasicLayout,
    meta: { title: '首页' },
    redirect: '/dashboard/workplace',
    children: [
      // dashboard
      {
        path: 'dashboard',
        name: 'dashboard',
        redirect: '/dashboard/workplace',
        component: RouteView,
        // eslint-disable-next-line standard/object-curly-even-spacing
        meta: { title: '仪表盘', keepAlive: true, icon: bxAnaalyse /* permission: [ 'dashboard' ] */ },
        children: [
          {
            path: 'analysis/:pageNo([1-9]\\d*)?',
            name: 'Analysis',
            component: () => import('@/views/system/dashboard/Analysis'),
            // eslint-disable-next-line standard/object-curly-even-spacing
            meta: { title: '分析页', keepAlive: true /* permission: [ 'dashboard' ] */ }
          },
          {
            path: 'workplace',
            name: 'Workplace',
            component: () => import('@/views/system/dashboard/Workplace'),
            // eslint-disable-next-line standard/object-curly-even-spacing
            meta: { title: '工作台', keepAlive: false/*, permission: [ 'dashboard' ] */ }
          }
        ]
      }
    ]
  },
  {
    path: '/test',
    component: BlankLayout,

_web/src/utils/img.js

@@ -0,0 +1,47 @@
const imgUrlDomain = process.env.imgServer
const imgUploadUrl = process.env.VUE_APP_IMG_UPLOAD_URL
// 头像图片路径通配
export function setImgUrl (str) {
  if (typeof str !== 'string') {
      return ''
  }
  if (str.length === 0) {
      return ''
  } else {
      if (str.indexOf('../') > -1) {
          // 访问本地路径
          return './images/' + str.split('/')[str.split('/').length - 1]
      } else if ((str.indexOf('http://') > -1) || (str.indexOf('https://') > -1)) {
          return str
      } else {
          // 服务器上的图片路径
          return imgUrlDomain + str
      }
  }
}
// 富文本文章图片路径通配
export function setArticleContent (content) {
  // 修改图片路径,处理图片服务防盗链的问题
  var domain = imgUploadUrl + '/image/getRemoteByURL?imageURL='
  // eslint-disable-next-line no-useless-escape
  var strRegex = /<img(.*?)src= \"(https|http):\/\//g
  content = content.replace(strRegex, function (rs) {
      // eslint-disable-next-line no-useless-escape
      var rg = /src=\"/
      var s = rs.replace(rg, 'src="' + domain)
      return s
  })
  var reg = /src=group1\//g
  content = content.replace(reg, 'src="' + imgUrlDomain + 'group1/')
  return content
}
// 去除内容里图片的 fileApi.imgServer
export function imgUrlDel (content) {
  var myReg = new RegExp(imgUrlDomain, 'g')
  var newcontent = content.replace(myReg, '')
  return newcontent
}

_web/src/utils/util.js

@@ -65,3 +65,12 @@ export function removeLoadingAnimate (id = '', timeout = 1500) {
    document.body.removeChild(document.getElementById(id))
  }, timeout)
}
export function checkUrl (url) {
  if (url) {
    var regExp = new RegExp()
    regExp.compile('^[A-Za-z]+://[A-Za-z0-9-_]+\\.[A-Za-z0-9-_%&?/.=]+$')
    // true为正确
    return regExp.test(url)
  }
}

_web/src/views/homeManager/addBannerForm.vue

@@ -0,0 +1,232 @@
<template>
  <a-modal
    title="新增Banner"
    :width="900"
    :visible="visible"
    :confirmLoading="confirmLoading"
    ok-text="保存"
    cancel-text="关闭"
    @ok="handleSubmit"
    @cancel="handleCancel"
    :maskClosable="false"
  >
    <a-spin :spinning="formLoading">
      <a-form :form="form">
        <a-form-item label="名称" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
          <a-input
            placeholder="请输入名称"
            v-decorator="['bannerName', {rules: [{required: true, message: '请输入名称！'}]}]"
          />
        </a-form-item>
        <a-form-item label="跳转方式" :labelCol="labelCol" :wrapperCol="wrapperCol" :required="true">
          <a-radio-group name="bannerType" v-decorator="['bannerType', { initialValue: 1 }]">
            <a-radio :value="1">无</a-radio>
            <a-radio :value="2">站内文章</a-radio>
            <a-radio :value="3">外部链接</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          :required="true"
          v-if="bannerType==2"
          label="选择文章"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-select
            style="width: 100%"
            placeholder="请选择文章"
            v-decorator="['bannerTypeUrl', {rules: [{ required: true, message: '请选择文章！' }]}]"
          >
            <a-select-option
              v-for="(item,index) in actionClassData"
              :key="index"
              :value="item"
            >{{ item }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          :required="true"
          v-if="bannerType==3"
          label="跳转链接Url"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input
            placeholder="请输入跳转链接"
            v-decorator="['bannerTypeUrl', {rules: [{validator: checkUrl}]}]"
          />
        </a-form-item>
        <a-form-item
          label="图片"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
          :required="true"
        >
          <div>
            <upload-component
              ref="upLoadRef"
              :remarkTxt="remarkTxt"
              @uploadSuccess="uploadSuccess"
              v-decorator="[
                'bannerImage',
                {
                  trigger: 'change',
                  rules: [{ validator: checkimageUrl }]
                },
              ]"
            ></upload-component>
          </div>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="排序"
          :hasFeedback="true"
          :required="true"
        >
          <a-input
            placeholder="请输入排序号"
            v-decorator="['bannerSort', {rules: [{validator: checkSortIndex}]}]"
          />
        </a-form-item>
        <a-form-item label="是否上线" :labelCol="labelCol" :wrapperCol="wrapperCol" :required="true">
          <a-radio-group name="bannerIsLine" v-decorator="['bannerIsLine',{ initialValue: 1 }]">
            <a-radio :value="1">上线</a-radio>
            <a-radio :value="0">下线</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>
<script>
import homeApi from '@/api/homeApi'
import uploadComponent from '@/components/upLoad'
import { checkUrl } from '@/utils/util'
export default {
  components: { uploadComponent },
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 }
      },
      visible: false,
      confirmLoading: false,
      actionClassData: [],
      bannerType: 3,
      formLoading: false,
      form: this.$form.createForm(this),
      remarkTxt: '请上传1920×712规格图像'
    }
  },
  mounted () {
  },
  methods: {
    // 初始化方法
    add (record) {
      this.visible = true
      // this.formLoading = true
      // this.getActionClass()
    },
    /**
     * 获取选择器下拉框数据
     */
    getActionClass () {
      homeApi.findArticleContentById().then(res => {
        this.formLoading = false
        if (res.success) {
          this.actionClassData = res.data
        } else {
          this.$message.error('获取选择器下拉框数据')
        }
      })
    },
    handleSubmit () {
      const {
        form: { validateFields }
      } = this
      this.confirmLoading = true
      validateFields((errors, values) => {
        if (!errors) {
          values.bannerSort = parseInt(values.bannerSort)
          values.bannerImage = 'group1/M00/00/4C/rBoAbl-iDrOAdZTxAAk_Z73wLB8030.jpg'
          homeApi.addBanner(values)
            .then(res => {
              if (res.status === 200) {
                this.$message.success('新增成功')
                this.visible = false
                this.confirmLoading = false
                this.$emit('ok', values)
                this.form.resetFields()
              } else {
                this.$message.error('新增失败：' + res.message)
              }
            })
            .finally(res => {
              this.confirmLoading = false
            })
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleCancel () {
      this.form.resetFields()
      this.visible = false
    },
    changeType (val) {
      this.bannerType = this.form.getFieldValue('bannerType')
    },
    uploadSuccess (avg) {
      if (avg.fileList[0]) {
        this.form.setFieldsValue({ 'bannerImage': avg.fileList[0].name })
        this.form.resetFields('bannerImage')
      }
    },
    checkimageUrl (rule, value, callback) {
      callback()
      // return false
      // if (value && value.length > 0) {
      //   callback()
      //   return
      // }
      // var text = '请上传图片'
      // callback(text)
    },
    checkUrl (rule, value, callback) {
      var text = '请输入跳转链接！'
      if (!value) {
        callback(text)
      } else if (checkUrl(value)) {
        callback()
      } else {
        text = '请输入正确的url地址'
        callback(text)
      }
    },
    checkSortIndex (rule, value, callback) {
      var text = '请输入排序号！'
      if (!value) {
        callback(text)
      } else if (/(^[1-9]\d*$)/.test(value)) {
        callback()
      } else {
        text = '请输入数字'
        callback(text)
      }
    }
  }
}
</script>

_web/src/views/homeManager/addCompanyCaseForm.vue

@@ -0,0 +1,235 @@
<template>
  <a-modal
    title="新增公司案例"
    :width="900"
    :visible="visible"
    :confirmLoading="confirmLoading"
    ok-text="保存"
    cancel-text="关闭"
    @ok="handleSubmit"
    @cancel="handleCancel"
    :maskClosable="false"
  >
    <a-spin :spinning="formLoading">
      <a-form :form="form">
        <a-form-item label="标题名称" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
          <a-input
            placeholder="请输入标题名称"
            v-decorator="['companyName', {rules: [{required: true, message: '请输入标题名称！'}]}]"
          />
        </a-form-item>
        <a-form-item
          label="描述"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-textarea :rows="4" :maxLength="30" placeholder="请输入描述" v-decorator="['companyDescribe']">
            <div slot="suffix">ddd</div>
          </a-textarea>
        </a-form-item>
        <a-form-item
          :required="true"
          label="关联案例"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-select
            style="width: 100%"
            placeholder="请选择产品"
            v-decorator="['companyAssociatedCase', {rules: [{ required: true, message: '请选择产品！' }]}]"
          >
            <a-select-option
              v-for="(item,index) in actionClassData"
              :key="index"
              :value="item"
            >{{ item }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="默认图片"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
          :required="true"
        >
          <div>
            <upload-component
              ref="upLoadDefaultRef"
              :remarkTxt="remarkTxt"
              @uploadSuccess="uploadSuccessDefault"
              v-decorator="[
                'companyDefaultImg',
                {
                  trigger: 'change',
                  rules: [{ validator: checkimageUrl }]
                },
              ]"
            ></upload-component>
          </div>
        </a-form-item>
        <a-form-item
          label="交互图像"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
          :required="true"
        >
          <div>
            <upload-component
              ref="upLoadExchangeRef"
              :remarkTxt="remarkTxt"
              @uploadSuccess="uploadSuccessExchange"
              v-decorator="[
                'companyExchangeImg',
                {
                  trigger: 'change',
                  rules: [{ validator: checkimageUrl }]
                },
              ]"
            ></upload-component>
          </div>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="排序"
          :hasFeedback="true"
          :required="true"
        >
          <a-input
            placeholder="请输入排序号"
            v-decorator="['companySort', {rules: [{validator: checkSortIndex}]}]"
          />
        </a-form-item>
        <a-form-item label="是否上线" :labelCol="labelCol" :wrapperCol="wrapperCol" :required="true">
          <a-radio-group name="companyIsLine" v-decorator="['companyIsLine',{ initialValue: 1 }]">
            <a-radio :value="1">上线</a-radio>
            <a-radio :value="0">下线</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>
<script>
import homeApi from '@/api/homeApi'
import uploadComponent from '@/components/upLoad'
export default {
  components: { uploadComponent },
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 }
      },
      visible: false,
      confirmLoading: false,
      actionClassData: [],
      bannerType: 3,
      formLoading: false,
      form: this.$form.createForm(this),
      remarkTxt: '请上传320×400规格图像'
    }
  },
  mounted () {
  },
  methods: {
    // 初始化方法
    add (record) {
      this.visible = true
      // this.formLoading = true
      // this.getActionClass()
    },
    /**
     * 获取选择器下拉框数据
     */
    getActionClass () {
      homeApi.findArticleContentById().then(res => {
        this.formLoading = false
        if (res.success) {
          this.actionClassData = res.data
        } else {
          this.$message.error('获取选择器下拉框数据')
        }
      })
    },
    handleSubmit () {
      const {
        form: { validateFields }
      } = this
      this.confirmLoading = true
      validateFields((errors, values) => {
        if (!errors) {
          values.companySort = parseInt(values.companySort)
          values.companyDefaultImg = 'group1/M00/00/4C/rBoAbl-iDrOAdZTxAAk_Z73wLB8030.jpg'
          values.companyExchangeImg = 'group1/M00/00/4C/rBoAbl-iDrOAdZTxAAk_Z73wLB8030.jpg'
          homeApi.addCompanyCase(values)
            .then(res => {
              if (res.status === 200) {
                this.$message.success('新增成功')
                this.visible = false
                this.confirmLoading = false
                this.$emit('ok', values)
                this.form.resetFields()
              } else {
                this.$message.error('新增失败：' + res.message)
              }
            })
            .finally(res => {
              this.confirmLoading = false
            })
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleCancel () {
      this.form.resetFields()
      this.visible = false
    },
    uploadSuccessDefault (avg) {
      if (avg.fileList[0]) {
        this.form.setFieldsValue({ 'companyDefaultImg': avg.fileList[0].name })
        this.form.resetFields('companyDefaultImg')
      }
    },
    uploadSuccessExchange (avg) {
      if (avg.fileList[0]) {
        this.form.setFieldsValue({ 'companyExchangeImg': avg.fileList[0].name })
        this.form.resetFields('companyExchangeImg')
      }
    },
    checkimageUrl (rule, value, callback) {
      callback()
      // return false
      // if (value && value.length > 0) {
      //   callback()
      //   return
      // }
      // var text = '请上传图片'
      // callback(text)
    },
    checkSortIndex (rule, value, callback) {
      var text = '请输入排序号！'
      if (!value) {
        callback(text)
      } else if (/(^[1-9]\d*$)/.test(value)) {
        callback()
      } else {
        text = '请输入数字'
        callback(text)
      }
    }
  }
}
</script>

_web/src/views/homeManager/addPartnerForm.vue

@@ -0,0 +1,159 @@
<template>
  <a-modal
    title="新增公司案例"
    :width="900"
    :visible="visible"
    :confirmLoading="confirmLoading"
    ok-text="保存"
    cancel-text="关闭"
    @ok="handleSubmit"
    @cancel="handleCancel"
    :maskClosable="false"
  >
    <a-spin :spinning="formLoading">
      <a-form :form="form">
        <a-form-item label="标题名称" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
          <a-input
            placeholder="请输入标题名称"
            v-decorator="['partnerName', {rules: [{required: true, message: '请输入标题名称！'}]}]"
          />
        </a-form-item>
        <a-form-item
          label="默认图片"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
          :required="true"
        >
          <div>
            <upload-component
              ref="upLoadRef"
              :remarkTxt="remarkTxt"
              @uploadSuccess="uploadSuccess"
              v-decorator="[
                'partnerImg',
                {
                  trigger: 'change',
                  rules: [{ validator: checkimageUrl }]
                },
              ]"
            ></upload-component>
          </div>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="排序"
          :hasFeedback="true"
          :required="true"
        >
          <a-input
            placeholder="请输入排序号"
            v-decorator="['partnerSort', {rules: [{validator: checkSortIndex}]}]"
          />
        </a-form-item>
        <a-form-item label="是否上线" :labelCol="labelCol" :wrapperCol="wrapperCol" :required="true">
          <a-radio-group name="partnerIsLine" v-decorator="['partnerIsLine',{ initialValue: 1 }]">
            <a-radio :value="1">上线</a-radio>
            <a-radio :value="0">下线</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>
<script>
import homeApi from '@/api/homeApi'
import uploadComponent from '@/components/upLoad'
export default {
  components: { uploadComponent },
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 }
      },
      visible: false,
      confirmLoading: false,
      formLoading: false,
      form: this.$form.createForm(this),
      remarkTxt: '请上传174×54规格图像'
    }
  },
  mounted () {
  },
  methods: {
    // 初始化方法
    add (record) {
      this.visible = true
      // this.formLoading = true
    },
    handleSubmit () {
      const {
        form: { validateFields }
      } = this
      this.confirmLoading = true
      validateFields((errors, values) => {
        if (!errors) {
          values.partnerSort = parseInt(values.partnerSort)
          values.partnerImg = 'group1/M00/00/4C/rBoAbl-iDrOAdZTxAAk_Z73wLB8030.jpg'
          homeApi.addPartenr(values)
            .then(res => {
              if (res.status === 200) {
                this.$message.success('新增成功')
                this.visible = false
                this.confirmLoading = false
                this.$emit('ok', values)
                this.form.resetFields()
              } else {
                this.$message.error('新增失败：' + res.message)
              }
            })
            .finally(res => {
              this.confirmLoading = false
            })
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleCancel () {
      this.form.resetFields()
      this.visible = false
    },
    uploadSuccess (avg) {
      if (avg.fileList[0]) {
        this.form.setFieldsValue({ 'partnerImg': avg.fileList[0].name })
        this.form.resetFields('partnerImg')
      }
    },
    checkimageUrl (rule, value, callback) {
      callback()
      // return false
      // if (value && value.length > 0) {
      //   callback()
      //   return
      // }
      // var text = '请上传图片'
      // callback(text)
    },
    checkSortIndex (rule, value, callback) {
      var text = '请输入排序号！'
      if (!value) {
        callback(text)
      } else if (/(^[1-9]\d*$)/.test(value)) {
        callback()
      } else {
        text = '请输入数字'
        callback(text)
      }
    }
  }
}
</script>

_web/src/views/homeManager/editBannerForm.vue

@@ -0,0 +1,239 @@
<template>
  <a-modal
    title="编辑定时任务"
    :width="900"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="formLoading">
      <a-form :form="form">
        <a-form-item
          style="display: none;"
        >
          <a-input v-decorator="['id']" />
        </a-form-item>
        <a-form-item label="名称" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
          <a-input
            placeholder="请输入名称"
            v-decorator="['bannerName', {rules: [{required: true, message: '请输入名称！'}]}]"
          />
        </a-form-item>
        <a-form-item label="跳转方式" :labelCol="labelCol" :wrapperCol="wrapperCol" :required="true">
          <a-radio-group name="bannerType" v-decorator="['bannerType', { initialValue: 1 }]">
            <a-radio :value="1">无</a-radio>
            <a-radio :value="2">站内文章</a-radio>
            <a-radio :value="3">外部链接</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          :required="true"
          v-if="bannerType==2"
          label="选择文章"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-select
            style="width: 100%"
            placeholder="请选择文章"
            v-decorator="['bannerTypeUrl', {rules: [{ required: true, message: '请选择文章！' }]}]"
          >
            <a-select-option
              v-for="(item,index) in actionClassData"
              :key="index"
              :value="item"
            >{{ item }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          :required="true"
          v-if="bannerType==3"
          label="跳转链接Url"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input
            placeholder="请输入跳转链接"
            v-decorator="['bannerTypeUrl', {rules: [{validator: checkUrl}]}]"
          />
        </a-form-item>
        <a-form-item
          label="图片"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
          :required="true"
        >
          <div>
            <upload-component
              ref="upLoadRef"
              :remarkTxt="remarkTxt"
              @uploadSuccess="uploadSuccess"
              v-decorator="[
                'bannerImage',
                {
                  trigger: 'change',
                  rules: [{ validator: checkimageUrl }]
                },
              ]"
            ></upload-component>
          </div>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="排序"
          :hasFeedback="true"
          :required="true"
        >
          <a-input
            placeholder="请输入排序号"
            v-decorator="['bannerSort', {rules: [{validator: checkSortIndex}]}]"
          />
        </a-form-item>
        <a-form-item label="是否上线" :labelCol="labelCol" :wrapperCol="wrapperCol" :required="true">
          <a-radio-group name="bannerIsLine" v-decorator="['bannerIsLine',{ initialValue: 1 }]">
            <a-radio :value="1">上线</a-radio>
            <a-radio :value="0">下线</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>
<script>
import homeApi from '@/api/homeApi'
import uploadComponent from '@/components/upLoad'
import { checkUrl } from '@/utils/util'
  export default {
    components: { uploadComponent },
    data () {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15 }
        },
        visible: false,
        confirmLoading: false,
        actionClassData: [],
        formLoading: false,
        form: this.$form.createForm(this),
        bannerType: 3,
        remarkTxt: '请上传1920×712规格图像'
      }
    },
    methods: {
      // 初始化方法
      edit (record) {
        this.visible = true
        this.formLoading = true
        // this.getActionClass()
        setTimeout(() => {
          this.form.setFieldsValue(
            {
              id: record.id,
              bannerName: record.bannerName,
              bannerImage: record.bannerImage,
              bannerIsLine: record.bannerIsLine,
              bannerSort: record.bannerSort,
              bannerTypeUrl: record.bannerTypeUrl,
              bannerType: record.bannerType
            }
          )
          this.bannerType = record.bannerType
          this.$refs.upLoadRef.initData([record.bannerImage])
        }, 100)
      },
      /**
       * 获取选择器下拉框数据
       */
      getActionClass () {
        homeApi.findArticleContentById().then((res) => {
          this.formLoading = false
          if (res.success) {
            this.actionClassData = res.data
          } else {
            this.$message.error('获取选择器下拉框数据')
          }
        })
      },
      handleSubmit () {
        const { form: { validateFields } } = this
        this.confirmLoading = true
        validateFields((errors, values) => {
          if (!errors) {
            homeApi.updateBanner(values).then((res) => {
              if (res.success) {
                this.$message.success('编辑成功')
                this.visible = false
                this.confirmLoading = false
                this.$emit('ok', values)
                this.form.resetFields()
              } else {
                this.$message.error('编辑失败：' + res.message)
              }
            }).finally((res) => {
              this.confirmLoading = false
            })
          } else {
            this.confirmLoading = false
          }
        })
      },
      handleCancel () {
        this.form.resetFields()
        this.visible = false
      },
      changeType (val) {
        this.bannerType = this.form.getFieldValue('bannerType')
      },
      uploadSuccess (avg) {
        if (avg.fileList[0]) {
          this.form.setFieldsValue({ 'bannerImage': avg.fileList[0].url })
          this.form.resetFields('bannerImage')
        }
      },
      checkimageUrl (rule, value, callback) {
        callback()
        // return false
        // if (value && value.length > 0) {
        //   callback()
        //   return
        // }
        // var text = '请上传图片'
        // callback(text)
      },
      checkUrl (rule, value, callback) {
        var text = '请输入跳转链接！'
        if (!value) {
          callback(text)
        } else if (checkUrl(value)) {
          callback()
        } else {
          text = '请输入正确的url地址'
          callback(text)
        }
      },
      checkSortIndex (rule, value, callback) {
        var text = '请输入排序号！'
        if (!value) {
          callback(text)
        } else if (/(^[1-9]\d*$)/.test(value)) {
          callback()
        } else {
          text = '请输入数字'
          callback(text)
        }
      }
    }
  }
</script>

_web/src/views/homeManager/indexBanner.vue

@@ -0,0 +1,225 @@
<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper" v-if="hasPerm('bannerIndex:page')">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="名称">
              <a-input v-model="queryParam.name" allow-clear placeholder="请输入名称搜索"/>
            </a-form-item>
          </a-col>
          <a-col :md="16" :sm="24">
            <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
            <a-button type="primary" style="margin-left: 8px" v-if="hasPerm('bannerIndex:add')" icon="plus" @click="$refs.addForm.add()">新增</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <s-table
      ref="table"
      size="default"
      :columns="columns"
      :data="loadData"
      :alert="true"
      :rowKey="(record) => record.id"
    >
      <span slot="bannerName" slot-scope="text">
        <ellipsis :length="30" tooltip>{{ text }}</ellipsis>
      </span>
      <span slot="bannerImage" slot-scope="src">
        <img :src="src | getImgUrl" width="60" height="45" @click="showPreviewImg(src)"/>
      </span>
      <span slot="bannerType" slot-scope="text">
        {{ typeFilter(text) }}
      </span>
      <span slot="action" slot-scope="text, record">
        <a-popconfirm placement="top" :title="record.bannerIsLine===1? '是否确认下线该banner？':'是否确认上线该banner？'" @confirm="() => editjobStatusStatus(record.bannerIsLine,record)">
          <a>{{ statusFilter(record.bannerIsLine) }}</a>
        </a-popconfirm>
        <a-divider type="vertical"/>
        <a v-if="hasPerm('bannerIndex:edit')" @click="$refs.editForm.edit(record)">编辑</a>
        <a-divider type="vertical" v-if="hasPerm('bannerIndex:edit') && hasPerm('bannerIndex:delete')"/>
        <a-popconfirm v-if="hasPerm('bannerIndex:delete')" placement="topRight" title="是否确认删除该banner？" @confirm="() => bannerIndexDelete(record)">
          <a>删除</a>
        </a-popconfirm>
      </span>
    </s-table>
    <add-form ref="addForm" @ok="handleOk" />
    <edit-form ref="editForm" @ok="handleOk" />
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </a-card>
</template>
<script>
  import { STable, Ellipsis } from '@/components'
  import homeApi from '@/api/homeApi'
  import { setImgUrl } from '@/utils/img'
  import addForm from './addBannerForm'
  import editForm from './editBannerForm'
  // import { sysDictTypeDropDown } from '@/api/modular/system/dictManage'
  export default {
    name: 'BannerIndex',
    components: {
      STable,
      Ellipsis,
      addForm,
      editForm
    },
    data () {
      return {
        // 查询参数
        queryParam: { id: '' },
        // 表头
        columns: [
          {
            title: '序号',
            dataIndex: 'dataIndex',
            customRender: (text, row, index) => {
              return index + 1
            },
            align: 'center',
            width: '90px'
          },
          {
            title: '名称',
            dataIndex: 'partnerName',
            scopedSlots: { customRender: 'partnerName' }
          },
          {
            title: '图片',
            dataIndex: 'bannerImage',
            scopedSlots: { customRender: 'bannerImage' },
            align: 'center',
            width: '150px'
          },
          {
            title: '跳转方式',
            dataIndex: 'bannerType',
            scopedSlots: { customRender: 'bannerType' },
            align: 'center',
            width: '150px'
          },
          {
            title: '跳转链接',
            dataIndex: 'bannerTypeUrl',
            scopedSlots: { customRender: 'bannerTypeUrl' }
          },
          {
            title: '排序',
            dataIndex: 'bannerSort',
            align: 'center',
            width: '90px'
          }
        ],
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          return homeApi.deleteBannerById(Object.assign(parameter, this.queryParam)).then((res) => {
            return res.data
          })
        },
        selectedRowKeys: [],
        selectedRows: [],
        statusDictTypeDropDown: [{ code: 0, name: '下线' }, { code: 1, name: '上线' }],
        typeDictTypeDropDown: [{ code: 1, name: '无' }, { code: 2, name: '站内文章' }, { code: 3, name: '外部链接' }],
        previewVisible: false,
        previewImage: ''
      }
    },
    created () {
      if (this.hasPerm('bannerIndex:edit') || this.hasPerm('bannerIndex:delete') || hasPerm('bannerIndex:start') || hasPerm('bannerIndex:stop')) {
        this.columns.push({
          title: '操作',
          width: '150px',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        })
      }
    },
    filters: {
      getImgUrl (v) {
        return setImgUrl(v)
      }
    },
    methods: {
      statusFilter (status) {
        const values = this.statusDictTypeDropDown.filter(item => item.code === status)
        if (values.length > 0) {
          return values[0].value
        } else {
          return '上线'
        }
      },
      typeFilter (type) {
        const values = this.typeDictTypeDropDown.filter(item => item.code === type)
        if (values.length > 0) {
          return values[0].value
        } else {
          return '无'
        }
      },
      /**
       * 启动停止
       */
      editjobStatusStatus (code, record) {
        if (code === 1) {
          homeApi.updateIsLinebanner({ id: record.id, isLine: false }).then(res => {
            if (res.success) {
              this.$message.success('下线成功')
              this.$refs.table.refresh()
            } else {
              this.$message.error('下线失败：' + res.message)
            }
          })
        } else if (code === 2) {
          homeApi.updateIsLinebanner({ id: record.id, isLine: true }).then(res => {
            if (res.success) {
              this.$message.success('上线成功')
              this.$refs.table.refresh()
            } else {
              this.$message.error('上线失败：' + res.message)
            }
          })
        }
      },
      bannerIndexDelete (record) {
        homeApi.deleteBannerById({ id: record.id }).then((res) => {
          if (res.success) {
            this.$message.success('删除成功')
            this.$refs.table.refresh()
          } else {
            this.$message.error('删除失败：' + res.message)
          }
        }).catch((err) => {
          this.$message.error('删除错误：' + err.message)
        })
      },
      toggleAdvanced () {
        this.advanced = !this.advanced
      },
      handleOk () {
        this.$refs.table.refresh()
      },
      onSelectChange (selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      },
      showPreviewImg (src) {
        this.previewImage = setImgUrl(src)
        this.previewVisible = true
      },
      handleCancel () {
        this.previewVisible = false
      }
    }
  }
</script>
<style lang="less">
  .table-operator {
    margin-bottom: 18px;
  }
  button {
    margin-right: 8px;
  }
</style>

_web/src/views/homeManager/indexCompanyCase.vue

@@ -0,0 +1,233 @@
<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper" v-if="hasPerm('companyCaseIndex:page')">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="名称">
              <a-input v-model="queryParam.name" allow-clear placeholder="请输入名称搜索"/>
            </a-form-item>
          </a-col>
          <a-col :md="16" :sm="24">
            <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
            <a-button type="primary" style="margin-left: 8px" v-if="hasPerm('companyCaseIndex:add')" icon="plus" @click="$refs.addForm.add()">新增</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <s-table
      ref="table"
      size="default"
      :columns="columns"
      :data="loadData"
      :alert="true"
      :rowKey="(record) => record.id"
    >
      <span slot="companyName" slot-scope="text">
        <ellipsis :length="10" tooltip>{{ text }}</ellipsis>
      </span>
      <span slot="companyDescribe" slot-scope="text">
        <ellipsis :length="10" tooltip>{{ text }}</ellipsis>
      </span>
      <span slot="companyDefaultImg" slot-scope="src">
        <img :src="src | getImgUrl" width="60" height="45" @click="showPreviewImg(src)"/>
      </span>
      <span slot="companyExchangeImg" slot-scope="src">
        <img :src="src | getImgUrl" width="60" height="45" @click="showPreviewImg(src)"/>
      </span>
      <span slot="companyAssociatedCase" slot-scope="text">
        <ellipsis :length="10" tooltip>{{ text }}</ellipsis>
      </span>
      <span slot="companyJumpUrl" slot-scope="text">
        <ellipsis :length="10" tooltip>{{ text }}</ellipsis>
      </span>
      <span slot="action" slot-scope="text, record">
        <a-popconfirm placement="top" :title="record.companyIsLine===1? '是否确认下线该条目？':'是否确认上线该条目？'" @confirm="() => editjobStatusStatus(record.companyIsLine,record)">
          <a>{{ statusFilter(record.companyIsLine) }}</a>
        </a-popconfirm>
        <a v-if="hasPerm('companyCaseIndex:edit')" @click="$refs.editForm.edit(record)">编辑</a>
        <a-divider type="vertical" v-if="hasPerm('companyCaseIndex:edit') && hasPerm('companyCaseIndex:delete')"/>
        <a-popconfirm v-if="hasPerm('companyCaseIndex:delete')" placement="topRight" title="是否确认删除该条目？" @confirm="() => companyCaseIndexDelete(record)">
          <a>删除</a>
        </a-popconfirm>
      </span>
    </s-table>
    <add-form ref="addForm" @ok="handleOk" />
    <edit-form ref="editForm" @ok="handleOk" />
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </a-card>
</template>
<script>
  import { STable, Ellipsis } from '@/components'
  import homeApi from '@/api/homeApi'
  import { setImgUrl } from '@/utils/img'
  import addForm from './addCompanyCaseForm'
  import editForm from './editBannerForm'
  // import { sysDictTypeDropDown } from '@/api/modular/system/dictManage'
  export default {
    name: 'CompanyCaseIndex',
    components: {
      STable,
      Ellipsis,
      addForm,
      editForm
    },
    data () {
      return {
        // 查询参数
        queryParam: { id: '' },
        // 表头
        columns: [
          {
            title: '序号',
            dataIndex: 'dataIndex',
            customRender: (text, row, index) => {
              return index + 1
            },
            align: 'center',
            width: '90px'
          },
          {
            title: '名称',
            dataIndex: 'companyName',
            scopedSlots: { customRender: 'companyName' }
          },
          {
            title: '描述',
            dataIndex: 'companyDescribe',
            scopedSlots: { customRender: 'companyDescribe' }
          },
          {
            title: '默认图片',
            dataIndex: 'companyDefaultImg',
            scopedSlots: { customRender: 'companyDefaultImg' },
            align: 'center',
            width: '150px'
          },
          {
            title: '交互图片',
            dataIndex: 'companyExchangeImg',
            scopedSlots: { customRender: 'companyExchangeImg' },
            align: 'center',
            width: '150px'
          },
          {
            title: '关联案例',
            dataIndex: 'companyAssociatedCase',
            scopedSlots: { customRender: 'companyAssociatedCase' }
          },
          {
            title: '跳转链接',
            dataIndex: 'companyJumpUrl',
            scopedSlots: { customRender: 'companyJumpUrl' }
          },
          {
            title: '排序',
            dataIndex: 'companySort',
            align: 'center',
            width: '90px'
          }
        ],
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          return homeApi.findCompanyCaseById(Object.assign(parameter, this.queryParam)).then((res) => {
            return res.data
          })
        },
        selectedRowKeys: [],
        selectedRows: [],
        statusDictTypeDropDown: [{ code: 0, name: '下线' }, { code: 1, name: '上线' }],
        previewVisible: false,
        previewImage: ''
      }
    },
    created () {
      if (this.hasPerm('companyCaseIndex:edit') || this.hasPerm('companyCaseIndex:delete') || hasPerm('companyCaseIndex:start') || hasPerm('companyCaseIndex:stop')) {
        this.columns.push({
          title: '操作',
          width: '150px',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        })
      }
    },
    filters: {
      getImgUrl (v) {
        return setImgUrl(v)
      }
    },
    methods: {
      statusFilter (status) {
        const values = this.statusDictTypeDropDown.filter(item => item.code === status)
        if (values.length > 0) {
          return values[0].value
        } else {
          return 'ddd'
        }
      },
      /**
       * 启动停止
       */
      editjobStatusStatus (code, record) {
        if (code === 1) {
          homeApi.updateIsLineCompanyCase({ id: record.id, isLine: false }).then(res => {
            if (res.success) {
              this.$message.success('下线成功')
              this.$refs.table.refresh()
            } else {
              this.$message.error('下线失败：' + res.message)
            }
          })
        } else if (code === 2) {
          homeApi.updateIsLineCompanyCase({ id: record.id, isLine: true }).then(res => {
            if (res.success) {
              this.$message.success('上线成功')
              this.$refs.table.refresh()
            } else {
              this.$message.error('上线失败：' + res.message)
            }
          })
        }
      },
      companyCaseIndexDelete (record) {
        homeApi.deleteCompanyCase({ id: record.id }).then((res) => {
          if (res.success) {
            this.$message.success('删除成功')
            this.$refs.table.refresh()
          } else {
            this.$message.error('删除失败：' + res.message)
          }
        }).catch((err) => {
          this.$message.error('删除错误：' + err.message)
        })
      },
      toggleAdvanced () {
        this.advanced = !this.advanced
      },
      handleOk () {
        this.$refs.table.refresh()
      },
      onSelectChange (selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      },
      showPreviewImg (src) {
        this.previewImage = setImgUrl(src)
        this.previewVisible = true
      },
      handleCancel () {
        this.previewVisible = false
      }
    }
  }
</script>
<style lang="less">
  .table-operator {
    margin-bottom: 18px;
  }
  button {
    margin-right: 8px;
  }
</style>

_web/src/views/homeManager/indexPartner.vue

@@ -0,0 +1,198 @@
<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper" v-if="hasPerm('partnerIndex:page')">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="名称">
              <a-input v-model="queryParam.name" allow-clear placeholder="请输入名称搜索"/>
            </a-form-item>
          </a-col>
          <a-col :md="16" :sm="24">
            <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
            <a-button type="primary" style="margin-left: 8px" v-if="hasPerm('partnerIndex:add')" icon="plus" @click="$refs.addForm.add()">新增</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <s-table
      ref="table"
      size="default"
      :columns="columns"
      :data="loadData"
      :alert="true"
      :rowKey="(record) => record.id"
    >
      <span slot="partnerName" slot-scope="text">
        <ellipsis :length="30" tooltip>{{ text }}</ellipsis>
      </span>
      <span slot="partnerImage" slot-scope="src">
        <img :src="src | getImgUrl" width="60" height="45" @click="showPreviewImg(src)"/>
      </span>
      <span slot="action" slot-scope="text, record">
        <a-popconfirm placement="top" :title="record.partnerIsLine===1? '是否确认下线该条目？':'是否确认上线该条目？'" @confirm="() => editjobStatusStatus(record.partnerIsLine,record)">
          <a>{{ statusFilter(record.partnerIsLine) }}</a>
        </a-popconfirm>
        <a-divider type="vertical"/>
        <a v-if="hasPerm('partnerIndex:edit')" @click="$refs.editForm.edit(record)">编辑</a>
        <a-divider type="vertical" v-if="hasPerm('partnerIndex:edit') && hasPerm('partnerIndex:delete')"/>
        <a-popconfirm v-if="hasPerm('partnerIndex:delete')" placement="topRight" title="是否确认删除该条目？" @confirm="() => partnerIndexDelete(record)">
          <a>删除</a>
        </a-popconfirm>
      </span>
    </s-table>
    <add-form ref="addForm" @ok="handleOk" />
    <edit-form ref="editForm" @ok="handleOk" />
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </a-card>
</template>
<script>
  import { STable, Ellipsis } from '@/components'
  import homeApi from '@/api/homeApi'
  import { setImgUrl } from '@/utils/img'
  import addForm from './addPartnerForm'
  import editForm from './editBannerForm'
  // import { sysDictTypeDropDown } from '@/api/modular/system/dictManage'
  export default {
    name: 'PartnerIndex',
    components: {
      STable,
      Ellipsis,
      addForm,
      editForm
    },
    data () {
      return {
        // 查询参数
        queryParam: { id: '' },
        // 表头
        columns: [
          {
            title: '序号',
            dataIndex: 'dataIndex',
            customRender: (text, row, index) => {
              return index + 1
            },
            align: 'center',
            width: '90px'
          },
          {
            title: '名称',
            dataIndex: 'partnerName',
            scopedSlots: { customRender: 'partnerName' }
          },
          {
            title: '图片',
            dataIndex: 'partnerImage',
            scopedSlots: { customRender: 'partnerImage' },
            align: 'center'
          },
          {
            title: '排序',
            dataIndex: 'partnerSort',
            align: 'center'
          }
        ],
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          return homeApi.findPartenrById(Object.assign(parameter, this.queryParam)).then((res) => {
            return res.data
          })
        },
        selectedRowKeys: [],
        selectedRows: [],
        statusDictTypeDropDown: [{ code: 0, name: '下线' }, { code: 1, name: '上线' }],
        previewVisible: false,
        previewImage: ''
      }
    },
    created () {
      if (this.hasPerm('partnerIndex:edit') || this.hasPerm('partnerIndex:delete') || hasPerm('partnerIndex:start') || hasPerm('partnerIndex:stop')) {
        this.columns.push({
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        })
      }
    },
    filters: {
      getImgUrl (v) {
        return setImgUrl(v)
      }
    },
    methods: {
      statusFilter (status) {
        const values = this.statusDictTypeDropDown.filter(item => item.code === status)
        if (values.length > 0) {
          return values[0].value
        } else {
          return '上线'
        }
      },
      /**
       * 启动停止
       */
      editjobStatusStatus (code, record) {
        if (code === 1) {
          homeApi.updateIsLinePartner({ id: record.id, isLine: false }).then(res => {
            if (res.success) {
              this.$message.success('下线成功')
              this.$refs.table.refresh()
            } else {
              this.$message.error('下线失败：' + res.message)
            }
          })
        } else if (code === 2) {
          homeApi.updateIsLinePartner({ id: record.id, isLine: true }).then(res => {
            if (res.success) {
              this.$message.success('上线成功')
              this.$refs.table.refresh()
            } else {
              this.$message.error('上线失败：' + res.message)
            }
          })
        }
      },
      partnerIndexDelete (record) {
        homeApi.deletePartner({ id: record.id }).then((res) => {
          if (res.success) {
            this.$message.success('删除成功')
            this.$refs.table.refresh()
          } else {
            this.$message.error('删除失败：' + res.message)
          }
        }).catch((err) => {
          this.$message.error('删除错误：' + err.message)
        })
      },
      toggleAdvanced () {
        this.advanced = !this.advanced
      },
      handleOk () {
        this.$refs.table.refresh()
      },
      onSelectChange (selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      },
      showPreviewImg (src) {
        this.previewImage = setImgUrl(src)
        this.previewVisible = true
      },
      handleCancel () {
        this.previewVisible = false
      }
    }
  }
</script>
<style lang="less">
  .table-operator {
    margin-bottom: 18px;
  }
  button {
    margin-right: 8px;
  }
</style>

_web/vue.config.js

@@ -28,6 +28,7 @@ const assetsCDN = {
// vue.config.js
const vueConfig = {
  lintOnSave: false,
  configureWebpack: {
    // webpack plugins
    plugins: [