dvcp_v2_webapp/project/pidu/app/AppGoods/components/Add.vue

<template>
  <ai-detail class="appgoods">
    <template slot="title">
      <ai-title title="添加商品" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
      </ai-title>
    </template>
    <template slot="content">
      <ai-card title="基本信息">
        <template #content>
          <el-form :model="form" label-width="120px" ref="form">
            <el-form-item label="商品名称" prop="merchandiseName" :rules="[{required: true, message: '请输入商品名称', trigger: 'blur'}]">
              <el-input type="input" v-model="form.merchandiseName" clearable placeholder="请输入商品名称" maxlength="30" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="商品图片" prop="imageUrl">
              <ai-uploader
                :instance="instance"
                isShowTip
                v-model="form.imageUrl"
                :limit="9"
                is-crop>
                <template slot="tips">
                  <p>最多上传1张图片,单个文件最大10MB，支持jpg、jpeg、png格式</p>
                  <p>图片比例：1.6：1</p>
                </template>
              </ai-uploader>
            </el-form-item>
            <el-form-item label="商品单价" prop="merchandiseIntegral" :rules="[{required: true, message: '请输入商品单价', trigger: 'blur'}]">
              <el-input-number type="input" v-model="form.merchandiseIntegral" clearable placeholder="请输入商品单价" :min="0"></el-input-number>
            </el-form-item>
            <el-form-item label="商品库存" prop="merchandiseNumber" :rules="[{required: true, message: '请输入商品库存', trigger: 'blur'}]">
              <el-input-number type="input" v-model="form.merchandiseNumber" clearable placeholder="请输入商品库存" :min="0"></el-input-number>
            </el-form-item>
            <el-form-item label="可见范围" prop="visibleRange" :rules="[{required: true, message: '请输入商品名称', trigger: 'blur'}]">
              <el-radio-group v-model="form.visibleRange">
                <el-radio label="0">不限</el-radio>
                <el-radio label="1">仅指定网格可见</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="选择网格" v-if="form.visibleRange === '1'" prop="wxGroupsName" style="width: 100%;" :rules="[{ required: true, message: '请选择网格', trigger: 'change' }]">
              <ai-picker
                :instance="instance"
                multiple
                dialogTitle="选择网格"
                :ops="{label: 'girdName'}"
                pageTitle="网格"
                action="/app/appgirdinfo/girdList"
                v-model="form.rangeList"
                @pick="onPick"
                @change="onSelcetChange">
                <div class="AppAnnounceDetail-select">
                  <el-input size="small" class="AppAnnounceDetail-select__input" placeholder="请选择..." disabled v-model="form.wxGroupsName"></el-input>
                  <div class="select-left" v-if="form.rangeList.length">
                    <span v-for="(item, index) in form.girdList" :key="index" v-if="index < 9">{{ item }}</span>
                    <em v-if="form.girdList.length > 9">等{{ form.girdList.length }}个</em>
                  </div>
                  <i v-if="!form.rangeList.length">请选择</i>
                  <div class="select-right">{{ form.rangeList.length ? '重新选择' : '选择' }}</div>
                </div>
              </ai-picker>
            </el-form-item>
          </el-form>
        </template>
      </ai-card>
    </template>
    <template #footer>
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirm">提交</el-button>
    </template>
  </ai-detail>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    name: 'Add',

    props: {
      instance: Function,
      dict: Object,
      params: Object,
      menuName: String
    },

    data () {
      return {
        info: {},
        form: {
          merchandiseName: '',
          merchandiseIntegral: '',
          merchandiseNumber: '',
          wxGroupsName: '',
          createUnitName: '',
          rangeList: [],
          createUserName: '',
          visibleRange: '',
          imageUrl: []
        },
        girdList: [],
        cropOps: {
          width: "336px",
          height: "210px"
        },
        id: ''
      }
    },

    computed: {
      ...mapState(['user']),
      pageTitle: v => `${!!v.params.id ? '编辑' : '添加'}${v.menuName}`
    },

    created () {
      this.form.areaId = this.user.info.areaId
      this.disabledLevel = this.user.info.areaList.length
      if (this.params && this.params.id) {
        this.id = this.params.id
        this.getInfo(this.params.id)
      }
    },

    methods: {
      getInfo (id) {
        this.instance.post(`/app/appcountrysidetourism/queryDetailById?id=${id}`).then(res => {
          if (res.code === 0) {
            this.form = res.data
            this.form.thumbUrl = res.data.thumbUrl ? JSON.parse(res.data.thumbUrl) : []
          }
        })
      },

      onPick (e) {
        this.form.girdList = e.map(v => v.girdName)
      },

      onSelcetChange (e) {
        if (e.length) {
          this.form.wxGroupsName = '1'
        } else {
          this.form.wxGroupsName = ''
          this.form.wxGroups = []
        }
      },

      confirm () {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.instance.post(`/app/appcountrysidetourism/addOrUpdate`, {
              ...this.form,
              type: 5,
              createUserName: this.user.info.name,
              thumbUrl: this.form.thumbUrl.length ? JSON.stringify([{
                url: this.form.thumbUrl[0].url
              }]) : ''
            }).then(res => {
              if (res.code == 0) {
                this.$message.success('提交成功')
                setTimeout(() => {
                  this.cancel(true)
                }, 600)
              }
            })
          }
        })
      },

      cancel (isRefresh) {
        this.$emit('change', {
          type: 'List',
          isRefresh: !!isRefresh
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .appgoods {
    .AppAnnounceDetail-select {
      display: flex;
      align-items: center;
      min-height: 32px;
      line-height: 1;
      background: #F5F5F5;
      border-radius: 4px;
      border: 1px solid #D0D4DC;
      cursor: pointer;
      overflow: hidden;
      transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);

      &:hover {
        border-color: #26f;
      }

      & > i {
        flex: 1;
        height: 100%;
        line-height: 32px;
        padding: 0 12px;
        color: #888888;
        font-size: 14px;
        font-style: normal;
        border-right: 1px solid #D0D4DC;
        background: #fff;
      }

      .AppAnnounceDetail-select__input {
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
        opacity: 0;
        height: 100%;
      }

      .select-right {
        height: 100%;
        padding: 0 12px;
        color: #222222;
        font-size: 12px;
        cursor: pointer;
        transition: all ease 0.3s;

        &:hover {
          opacity: 0.5;
        }
      }

      .select-left {
        display: flex;
        flex-wrap: wrap;
        flex: 1;
        padding: 5px 0 0px 12px;
        border-right: 1px solid #D0D4DC;
        border-radius: 4px 0 0 4px;
        background: #fff;

        em {
          height: 22px;
          line-height: 22px;
          margin: 0 4px 5px 0;
          color: #222222;
          font-size: 12px;
          font-style: normal;
        }

        span {
          height: 22px;
          line-height: 22px;
          margin: 0 4px 5px 0;
          padding: 0 8px;
          font-size: 12px;
          color: #222222;
          background: #F3F4F7;
          border-radius: 2px;
          border: 1px solid #D0D4DC;
        }
      }
    }
  }
</style>