demo/demo-web-ui/src/views/mobileterminal/plugin.vue

<template>
  <div class="app-container">
    <div>
      <div class="tab-header webtop">
        <div>{{ viewTitle }}</div>
        <div>
          <el-button type="primary" size="small" :disabled="submitdisabled" @click="handleSave()">保存
          </el-button>
          <el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
        </div>
      </div>
      <div class="listconadd">
        <el-form ref="form_obj" :model="formobj" :rules="rules" class="formadd">
          <el-row style="border-top: 1px solid #e0e3eb">
            <el-col :span="5" class="tleftb">
              <span><span class="icon">*</span>插件名称</span>
            </el-col>
            <el-col :span="19">
              <el-form-item prop="appName"><el-input v-model="formobj.appName" class="addInput" clearable placeholder="" /></el-form-item>
            </el-col>
            <el-col :span="5" class="tleftb">
              <span><span class="icon">*</span>插件icon</span>
            </el-col>
            <el-col :span="19">
              <el-form-item>
                <upload_icon ref="uploadIcon" v-model="list" bucket="map" @change="backIcon" :upload-data="{type:'0002'}"/>
              </el-form-item>
            </el-col>
            <el-col :span="5" class="tleftb">
              <span><span class="icon">*</span>关联主程序</span>
            </el-col>
            <el-col :span="19">
              <el-form-item><el-input v-model="formobj.linkSid" class="addInput" clearable placeholder="" readonly /></el-form-item>
            </el-col>
            <el-col :span="5" class="tleftb">
              <span><span class="icon">*</span>启动名称</span>
            </el-col>
            <el-col :span="19">
              <el-form-item prop="modulePluginName"><el-input v-model="formobj.modulePluginName" class="addInput" clearable placeholder="" /></el-form-item>
            </el-col>
            <el-col :span="5" class="tleftb">
              <span><span class="icon">*</span>主页路由</span>
            </el-col>
            <el-col :span="19">
              <el-form-item prop="sourceAction"><el-input v-model="formobj.sourceAction" class="addInput" clearable placeholder="" /></el-form-item>
            </el-col>
            <el-col :span="5" class="tleftb">
              <span><span class="icon">*</span>插件包名</span>
            </el-col>
            <el-col :span="19">
              <el-form-item prop="sourcePackage"><el-input v-model="formobj.sourcePackage" class="addInput" clearable placeholder="" /></el-form-item>
            </el-col>
            <el-col :span="5" class="tleftb">
              <span><span class="icon">*</span>插件类型</span>
            </el-col>
            <el-col :span="19">
              <el-form-item prop="type">
                <el-select v-model="formobj.type" placeholder="请选择" filterable clearable class="addInput">
                  <el-option v-for="item in type_list" :key="item.dictKey" :label="item.dictValue" :value="item.dictValue"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5" class="tleftb">
              <span><span class="icon">*</span>apk上传</span>
            </el-col>
            <el-col :span="19">
              <el-form-item>
                <upload_apk ref="uploadMoreImg" v-model="imgList" @change="change" bucket="map" :fileInfo ="formobj"/>
              </el-form-item>
            </el-col>
            <el-col :span="5" class="tleftb">
              <span>更新内容</span>
            </el-col>
            <el-col :span="19">
              <el-form-item><el-input v-model="formobj.upgradeInfo" type="textarea" resize="none" :autosize="{ minRows: 2, maxRows: 50}" class="addInput" clearable placeholder="" /></el-form-item>
            </el-col>
            <el-col :span="5" class="tleftb">
              <span>排序号</span>
            </el-col>
            <el-col :span="19">
              <el-form-item><el-input v-model="formobj.sortNo" class="addInput" clearable placeholder="" /></el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import upload_apk from '@/components/uploadFile/upload_apk'
import upload_icon from '@/components/uploadFile/upload_icon'

export default {
  name: 'plugin',
  components: {
    upload_apk,
    upload_icon
  },
  data() {
    return {
      tableKey: 0,
      index: 0,
      viewTitle: '',
      dialogStatus: '',
      sid: '',
      isShow: true,
      list: [],
      imgList: [],
      type_list: [
        {
          dictKey: 0,
          dictValue: '内置Activity'
        },
        {
          dictKey: 1,
          dictValue: '内置WebView'
        },
        {
          dictKey: 2,
          dictValue: 'RePlugin插件'
        }
      ],
      formobj: {
        appName: '',
        appSid: '',
        iconUrl: '',
        linkSid: '147694bb-c765-4426-8f67-d19a66585f31',
        sourceAction: '',
        sourcePackage: '',
        type: '',
        upgradeInfo: '',
        modulePluginName: '',
        sortNo: ''
      },
      rules: {
        appName: [{ required: true, message: '插件名称不能为空', trigger: 'blur' }],
        modulePluginName: [{ required: true, message: '启动名称不能为空', trigger: 'blur' }],
        sourceAction: [{ required: true, message: '主页路由不能为空', trigger: 'blur' }],
        sourcePackage: [{ required: true, message: '插件包名不能为空', trigger: 'blur' }],
        type: [{ required: true, message: '插件类型不能为空', trigger: 'change' }]
      },
      submitdisabled: false
    }
  },
  methods: {
    init() {},
    showAdd() {
      this.$nextTick(() => {
        this.$refs['form_obj'].clearValidate()
      })
      this.init()
      this.dialogStatus = 'add'
      this.viewTitle = '新增插件'
    },
    handleSave() {
      this.$refs['form_obj'].validate(valid => {
        if (valid) {
          let bb = null
          this.type_list.forEach((e) => {
            if (e.dictValue === this.formobj.type) {
              bb = {
                key: e.dictKey
              }
            }
          })
          this.formobj.type = bb.key
          this.$refs.uploadMoreImg.submitUpload()
        } else {
          return false
        }
      })
    },
    change(value) {
      console.log(value, 65656)
      if (value.response.success) {
        this.$message({ showClose: true, type: 'success', message: '保存成功' })
        this.handleReturn('true')
      } else {
        this.$message({ showClose: true, type: 'error', message: value.response.msg })
      }
    },
    backIcon(val) {
      if (val.length > 0) {
        this.formobj.iconUrl = val[0].url
      }
    },
    handleReturn(isreload) {
      if (isreload === 'true') this.$emit('reloadlist')
      this.dialogStatus = ''
      this.formobj = {
        appName: '',
        appSid: '',
        iconUrl: '',
        linkSid: '147694bb-c765-4426-8f67-d19a66585f31',
        sourceAction: '',
        sourcePackage: '',
        type: '',
        upgradeInfo: '',
        modulePluginName: '',
        sortNo: ''
      }
      this.imgList = []
      this.list = []
      this.$emit('doback')
    }
  }
}
</script>

<style scoped>
.addInput {
  width: 30%;
}
</style>