<template> 
 | 
  <GlobalWindow 
 | 
    :title="title" 
 | 
    :visible.sync="visible" 
 | 
    :confirm-working="isWorking" 
 | 
    @confirm="confirm" 
 | 
  > 
 | 
    <el-form :model="form" ref="form" :rules="rules"> 
 | 
      <el-form-item label="名称" prop="name"> 
 | 
        <el-input v-if="form.type !=3"  v-model="form.name" placeholder="请输入名称" v-trim/> 
 | 
        <el-select v-else  v-model="form.name" placeholder="请选择订单类型" v-trim> 
 | 
          <el-option :value="'0'" label="用工单"></el-option> 
 | 
          <el-option :value="'1'" label="货运单"></el-option> 
 | 
          <el-option :value="'2'" label="订餐单"></el-option> 
 | 
        </el-select> 
 | 
      </el-form-item> 
 | 
      <el-form-item v-if="form.type ==3 " label="手续费(%)" prop="detail"> 
 | 
        <el-input  type="number"   v-model="form.detail" placeholder="请输入名称" v-trim/> 
 | 
      </el-form-item> 
 | 
      <el-form-item v-if="form.type == 1 || form.type == 2" :label=" form.type == 1?'车辆规格':'餐标配置(元)'" prop="detailList"> 
 | 
        <div style="display: flex;flex-direction: column"> 
 | 
          <div style="position: relative;display: block;width: 100%;" v-for="(item,index) in form.detailList"   > 
 | 
            <el-input  :type="form.type == 1?'text':'number'" style="display:inline-block;width: 60%;margin:5px ;float: left" v-model="form.detailList[index]"   placeholder="请输入内容" v-trim/> 
 | 
            <el-button  style="display:inline-block;margin : 5px " @click="del(index)" v-if="form.detailList.length>0">x</el-button> 
 | 
          </div> 
 | 
          <div style="position: relative;display: block;width: 100%;"> 
 | 
            <el-button style="width: 100px;margin: 5px;" type="primary" @click="add()">添加规格</el-button> 
 | 
          </div> 
 | 
        </div> 
 | 
      </el-form-item> 
 | 
      <el-form-item v-if="form.type == 1" label="图标" prop="icon"> 
 | 
        <UploadAvatarImage 
 | 
            :file="{ imgurlfull: form.iconFull, imgurl: form.icon }" 
 | 
            :uploadData="uploadData" 
 | 
            @uploadSuccess="uploadAvatarSuccess" 
 | 
        /> 
 | 
      </el-form-item> 
 | 
      <el-form-item  v-if="form.id ==null && form.type == 1"  label="是否固定车辆" prop="isFixed"> 
 | 
        <el-radio-group v-model="form.isFixed"> 
 | 
          <el-radio :label="0">非固定</el-radio> 
 | 
          <el-radio :label="1">固定车型</el-radio> 
 | 
        </el-radio-group> 
 | 
      </el-form-item> 
 | 
      <el-form-item label="排序码" prop="sortnum"> 
 | 
        <el-input v-model="form.sortnum" placeholder="请输入排序码" v-trim/> 
 | 
      </el-form-item> 
 | 
    </el-form> 
 | 
  </GlobalWindow> 
 | 
</template> 
 | 
  
 | 
<script> 
 | 
import BaseOpera from '@/components/base/BaseOpera' 
 | 
import GlobalWindow from '@/components/common/GlobalWindow' 
 | 
import UploadAvatarImage from '@/components/common/UploadAvatarImage' 
 | 
export default { 
 | 
  name: 'OperaCategoryWindow', 
 | 
  extends: BaseOpera, 
 | 
  components: { GlobalWindow ,UploadAvatarImage}, 
 | 
  data () { 
 | 
    return { 
 | 
      isUploading: false, 
 | 
      uploadData: { 
 | 
        folder: 'category' 
 | 
      }, 
 | 
      // 表单数据 
 | 
      form: { 
 | 
        id: null, 
 | 
        status: 0, 
 | 
        sortnum: null, 
 | 
        name: '', 
 | 
        type: null, 
 | 
        detail:null, 
 | 
        detailList: [''], 
 | 
        icon: '', 
 | 
        iconFull: '', 
 | 
        isFixed: 0 
 | 
      }, 
 | 
      // 验证规则 
 | 
      rules: { 
 | 
        name: [{ required: true, message: '请输入配置名称' }] 
 | 
      } 
 | 
    } 
 | 
  }, 
 | 
  created () { 
 | 
    this.config({ 
 | 
      api: '/business/category', 
 | 
      'field.id': 'id' 
 | 
    }) 
 | 
  }, 
 | 
  methods:{ 
 | 
    del(index){ 
 | 
      if(this.form.detailList.length<=1){ 
 | 
        return 
 | 
      } 
 | 
      this.form.detailList.splice(index,1) 
 | 
    }, 
 | 
    add(){ 
 | 
      this.form.detailList.push('') 
 | 
    }, 
 | 
    uploadAvatarSuccess (file) { 
 | 
      this.$set(this.form, 'icon', file.imgurl) 
 | 
      this.$set(this.form, 'iconFull', file.imgurlfull) 
 | 
    }, 
 | 
    open(title, target, type) { 
 | 
      this.title = title 
 | 
      this.visible = true 
 | 
      this.form = { 
 | 
        id: null, 
 | 
        status: 0, 
 | 
        sortnum: null, 
 | 
        name: '', 
 | 
        detail: null, 
 | 
        type: type, 
 | 
        detailList: [''], 
 | 
        icon: '', 
 | 
        iconFull: '', 
 | 
        isFixed: 0 
 | 
      } 
 | 
      // 新建 
 | 
      if (target == null) { 
 | 
        this.$nextTick(() => { 
 | 
          this.$refs.form.resetFields() 
 | 
          this.form[this.configData['field.id']] = null 
 | 
          this.form.type = type 
 | 
        }) 
 | 
        return 
 | 
      } 
 | 
      // 编辑 
 | 
      this.$nextTick(() => { 
 | 
        for (const key in this.form) { 
 | 
          this.form[key] = target[key] 
 | 
        } 
 | 
        if(this.form.detailList==null){ 
 | 
          this.form.detailList = [''] 
 | 
        } 
 | 
      }) 
 | 
    } 
 | 
  } 
 | 
} 
 | 
</script> 
 |