优化

MrShi

昨天 4eac422e52a4d28fb651b75d0f054697c7a2c0fa

 admin/src/components/business/OperaLabelsAreaWindow.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,142 @@
<template>
  <GlobalAlertWindow
    v-loading="isUploading"
    :title="title"
    :visible.sync="visible"
    :confirm-working="isWorking"
    @confirm="confirm"
  >
    <el-form :model="form" ref="form" :rules="rules" label-width="120px" label-suffix="："  inline>
      <el-form-item label="区域名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入分类名称"  v-trim/>
      </el-form-item>
      <el-form-item label="选择省份" prop="name">
        <el-select v-model="form.areaIdList" placeholder="请选择省份" multiple filterable>
          <el-option
              v-for="item in province"
              :key="item.id"
              :value="item.id"
              :label="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="排序码" prop="sortnum">
        <el-input v-model="form.sortnum" type="number"  placeholder="请输入排序码" v-trim/>
      </el-form-item>
    </el-form>
  </GlobalAlertWindow>
</template>

<script>
import BaseOpera from '@/components/base/BaseOpera'
import GlobalAlertWindow from '@/components/common/GlobalAlertWindow'
import { listByParentId } from '@/api/business/areas'

export default {
  name: 'OperaLabelsWindow',
  extends: BaseOpera,
  components: { GlobalAlertWindow },
  data () {
    return {
      isUploading: false,
      // è¡¨å•æ•°æ®
      form: {
        id: null,
        name: '',
        info: '',
        type: 13,
        module: 0,
        sortnum: '',
        areaIdList: [],
        areaList: []
      },
      province: [],
      // éªŒè¯è§„则
      rules: {
      }
    }
  },
  created () {
    this.config({
      api: '/business/labels',
      'field.id': 'id'
    })
    listByParentId({ type: 0, parentId: '' })
      .then(data => {
        this.province = data
      })
  },
  methods: {
    open (title, target) {
      var that =this
      this.title = title
      this.visible = true
      // this.isEdit = false
      this.form.areaList = []
      this.form.areaIdList = []
      // æ–°å»º
      if (target == null) {
        this.$nextTick(() => {
          this.$refs.form.resetFields()
          this.form[this.configData['field.id']] = null
        })
        return
      }
      // ç¼–辑
      this.$nextTick(() => {
        this.isEdit = true
        for (const key in this.form) {
          this.form[key] = target[key]
        }
        that.form.areaIdList = []
        if (this.form.areaList && this.form.areaList.length) {
          this.form.areaList.forEach(item => {
            that.form.areaIdList.push(item.id)
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/style/alertstyle.scss";
$image-width: 100px;

::v-deep .el-select {
    width: 100%;
    .el-input__inner {
      width: 100%;
    }
  }
.avatar-uploader {
  width: $image-width;
  height: $image-width;
}
::v-deep .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  width: $image-width;
  height: $image-width;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: $image-width;
  height: $image-width;
  line-height: $image-width;
  text-align: center;
}
.avatar {
  width: $image-width;
  height: $image-width;
  display: block;
}
</style>