green-valley-admin/src/components/Banner/BannerEdit.vue

<template>
  <div class="d-flex flex-wrap pb-3">
    <!-- 编辑 -->
    <a-modal :closable="false" footer title="修改轮播图" v-model="editVisible" width="700px" @cancel="$emit('closeModal')">
      <a-form :form="form" @submit="handleSubmit" v-if="editItem">
        <!-- 页面路径 -->
        <!-- <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="页面路径">
          <a-input
            placeholder="页面路径"
            v-decorator="[
              'pagePath',
              {
                rules: [
                  { required: true, message: '页面路径不能为空' },
                  { whitespace: true, message: '页面路径不能为空' },
                  { max: 140, massage: '页面路径最多140个字符' },
                ],
              },
            ]"
          />
        </a-form-item> -->
        <!-- 跳转类型 -->
        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="跳转类型">
          <a-select @change="getUse($event, 'jumpType')" class="ml-3" :default-value="enable1[editItem.jumpType]" style="width: 150px">
            <a-select-option :key="item" :value="index" v-for="(item, index) in enable1">{{ item }}</a-select-option>
          </a-select>
        </a-form-item>
        <!-- 跳转路径 -->
        <a-form-item
          v-if="editItem.jumpType === 1"
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
          label="图片跳转路径"
        >
          <a-input v-model="editItem.jumpUrl" placeholder="图片跳转路径" class="ml-3" />
        </a-form-item>
        <!-- 状态 -->
        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="状态">
          <a-select @change="getUse($event, 'recStatus')" class="ml-3" :default-value="enable[editItem.recStatus]" style="width: 150px">
            <a-select-option :key="item" :value="index" v-for="(item, index) in enable">{{ item }}</a-select-option>
          </a-select>
        </a-form-item>
        <!-- 页面显示位置 -->
        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="页面显示位置">
          <a-select @change="getUse($event, 'showPage')" class="ml-3" :default-value="editItem.showPage" style="width: 100%">
            <a-select-option :key="item.page" :value="item.page" v-for="item in enable2">{{ item.name }}</a-select-option>
          </a-select>
        </a-form-item>
        <!-- 图片 -->
        <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="图片">
          <a-upload :before-upload="beforeUpload" class="ml-3" :action="upload" list-type="picture" name="files" @change="handleChange">
            <a-button v-show="fileList.length - 0 === 0"> <a-icon type="upload" /> 选择图片 </a-button>
          </a-upload>
        </a-form-item>
        <a-form-item class="d-flex flex-row-reverse">
          <a-button @click="$emit('closeModal')" class="mr-3">取消</a-button>
          <a-button class="white--text" html-type="submit" type="primary">保存</a-button>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
// import { upTeam } from 'config/api';
import { upload, addCarousel } from 'config/api';

const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 16 },
};

const tailItemLayout = { wrapperCol: { span: 16, offset: 6 } };

export default {
  name: 'BannerEdit',
  props: { editVisible: { type: Boolean, default: false }, editItem: { type: Object, default: () => {} } },
  data() {
    return {
      formItemLayout,
      tailItemLayout,
      form: this.$form.createForm(this, { name: 'r-d-add' }),
      enable: ['启用', '禁用'],
      enable1: ['不跳转', 'H5'],
      enable2: [
        {
          name: '首页',
          page: 0,
        },
        {
          name: '关于我们-公司介绍',
          page: 11,
        },
        {
          name: '关于我们-组织机构',
          page: 12,
        },
        {
          name: '创新平台-创新资源平台',
          page: 32,
        },
        {
          name: '创新平台-科技创新服务',
          page: 33,
        },
        {
          name: ':孵化平台-众创空间',
          page: 41,
        },
        {
          name: '孵化平台-公共实验室',
          page: 42,
        },
        {
          name: '孵化平台-中试基地',
          page: 43,
        },
        {
          name: '孵化平台-创业导师',
          page: 44,
        },
        {
          name: '孵化平台-孵化场所',
          page: 45,
        },
        {
          name: '孵化平台-创业服务',
          page: 46,
        },
        {
          name: '孵化平台-众创空间-虚拟众创空间',
          page: 48,
        },
        {
          name: '孵化平台-众创空间-实体众创空间',
          page: 49,
        },
        {
          name: '产业平台-产业服务',
          page: 52,
        },
      ],
      upload: upload,
      fileList: [],
      //限制文件上传的格式和大小
      beforeUpload: file => {
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
        if (!isJpgOrPng) {
          this.$message.error('仅支持 JPG/PNG 格式的图片!');
        }
        return isJpgOrPng;
      },
    };
  },
  watch: {
    editItem(val) {
      console.log(val);
    },
  },
  methods: {
    // 改变搜索条件
    getUse(e, str) {
      this.editItem[str] = e;
      if (str === 'jumpType' && e === 0) {
        this.editItem.jumpUrl = '';
      }
    },
    showPageNums(nums) {
      for (let i = 0; i < this.enable2.length; i++) {
        if (nums - 0 === this.enable2[i].page - 0) {
          return this.enable2[i].name;
        } else if (i === this.enable2.length - 1) {
          return '';
        }
      }
    },
    // 上传文件事件
    handleChange(info) {
      // this.fileList = fileList;
      if (info.file.status === 'done') {
        this.fileList.push(info.file.response.data[0].visitUrl);
      } else if (info.file.status === 'removed') {
        this.fileList = info.fileList;
      }
    },
    // 提交表单
    handleSubmit(e) {
      console.log(this.editItem);
      e.preventDefault();
      this.form.validateFieldsAndScroll(async (err, values) => {
        if (!err) {
          try {
            // const params = { param: values };
            // const res = await upTeam(params);
            // const { data, msg, code } = res.data;
            // this.$emit('closeModal');
            // if (code === 200) {
            //   this.$message.success('修改成功')
            //   // TODO: 填到列表中
            // } else {
            //   throw msg;
            // }
          } catch (error) {
            this.$message.error(error || '修改失败');
          }
        }
      });
    },
  },
};
</script>

<style scoped lang="stylus"></style>