caimei365-manager-ui/src/views/dataBase/store-list/edit.vue

<template>
  <div class="store-edit">
    <el-form ref="form" :model="form" :rules="storeAddRules" label-width="120px">
      <el-form-item label="商品信息：">
        <el-radio-group v-model="form.info">
          <el-radio v-for="i in storeInfo" :key="i.id" :label="i.id">{{ i.value }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="form.info === 1" label="添加商品：">
        <el-button type="primary" @click="exportDialogVisible = true">添加</el-button>
        <store-item
          v-for="i in selectStoreList"
          :key="i.id"
          :store-obj="i"
        />
      </el-form-item>
      <div v-if="form.info === 2">
        <el-form-item label="商品名称：" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="商品图片：" prop="image">
          <image-upload
            :limit="1"
            :image-list="textRelateds"
            @success="handleImageSuccess($event, 'textRelateds')"
            @remove="handleImageRemove($event, 'textRelateds')"
          />
        </el-form-item>
        <el-form-item label="供应商名称：" prop="linkMan">
          <el-input v-model="form.linkMan" />
        </el-form-item>
      </div>
      <el-form-item label="商品属性：">
        <el-select v-model="form.storeAttributes" placeholder="请选择商品属性">
          <el-option
            v-for="(i, index) in storeAttributes"
            :key="index"
            :label="i.value"
            :value="i.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="商品分类：">
        <el-select v-model="form.storeClass" placeholder="请选择商品分类">
          <el-option
            v-for="(i, index) in storeClass"
            :key="index"
            :label="i.value"
            :value="i.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">提交</el-button>
        <el-button @click="$router.back()">返回</el-button>
      </el-form-item>
    </el-form>

    <el-dialog title="选择商品" :visible.sync="exportDialogVisible" width="70%">
      <store-list-selector
        v-if="exportDialogVisible"
        @cancel="onSelectorCancel"
        @confirm="onSelectorConfirm"
      />
    </el-dialog>
  </div>
</template>

<script>
import databaseMixin from '../mixins/index'
import StoreListSelector from '../components/dialogTable.vue'
import StoreItem from '../components/storeItem.vue'
import ImageUpload from '@/components/UploadImage/index.vue'

export default {
  components: {
    StoreListSelector,
    StoreItem,
    ImageUpload
  },
  mixins: [databaseMixin],
  data() {
    return {
      form: {
        info: 1
      },
      exportDialogVisible: false,
      textRelateds: [],
      selectStoreList: []
    }
  },
  mounted() {},
  methods: {
    onSelectorCancel(val) {},
    onSelectorConfirm(val) {
      console.log(val)
    },
    handleImageRemove() {},
    handleImageSuccess() {},
    submitForm(form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          console.log(this.form)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.store-edit {
  width: 500px;
  margin: 0 auto;
}
</style>