ShibeiWorkPlatform_Frontend/src/views/modules/workSys/elegantEdit.vue

<template>
  <el-dialog :visible.sync="visible"
             :title="title"
             :width="diaWidth+'%'"
             :close-on-click-modal="false"
             :before-close="handleClose"
             :close-on-press-escape="false">
    <el-form :inline="false"
             :model="dataForm"
             :rules="dataRule"
             ref="dataForm"
             :label-width="'120px'">
      <div style="margin-top:20px">

        <el-form-item label="分类名称"
                      prop="categoryName">
          <el-tooltip class="item"
                      effect="dark"
                      content="请输入1-10个字"
                      placement="bottom-start">
            <el-input class="item_width_1"
                      :maxlength="10"
                      :minlength="1"
                      v-model="dataForm.categoryName"
                      placeholder="分类名称"></el-input>
          </el-tooltip>
        </el-form-item>
        <!-- <el-form-item label="排序"
                      prop="sort">
          <el-input-number v-model="dataForm.sort"
                           :min="1"
                           label="描述文字"></el-input-number>
        </el-form-item> -->
      </div>

    </el-form>
    <template slot="footer">
      <el-button @click="visible = false;resetData()">{{ $t('cancel') }}</el-button>
      <el-button type="primary"
                 @click="saveForm()">{{ $t('confirm') }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import { requestPost } from '@/js/dai/request'
export default {
  data () {
    return {
      visible: false,
      title: '分类信息',

      customerId: '',
      parentCategoryId: '', // 父级分类Id
      categoryId: '', // 当前操作分类Id
      type: '', // 操作类型(add:新增  edit:编辑)

      dataForm: {
        categoryName: '', // 分类名称
        sort: 0,
        type: '', // 操作类型(add:新增  edit:编辑)
        level: ''
      },

      url: ''

    }
  },
  created () {
    // this.queryFunctionList()
  },
  computed: {

    dataRule () {
      return {
        categoryName: [
          { required: true, message: '分类名称不能为空', trigger: 'blur' },
          { min: 2, max: 20, message: '分类名称长度在 2 到 20 个字符', trigger: 'blur' }
        ]
      }
    },
    diaWidth () {
      console.log(this.resolution)
      return this.resolution === 'small' ? 70 : 50
    },

    ...mapGetters(['clientHeight', 'resolution'])
  },
  methods: {
    // 初始化  customerId,parentCategoryId ,level,排序
    initAdd (customerId, parentCategoryId, level, sort) {
      this.visible = true
      this.customerId = customerId
      this.parentCategoryId = parentCategoryId
      this.type = 'add'
      this.dataForm.level = level
      this.dataForm.sort = sort
      this.url = '/resi/partymember/stylecategorydict/addorupdate'
    },

    // 初始化  customerId,parentCategoryId,dateform,level
    initEdit (customerId, parentCategoryId, dataForm) {
      this.visible = true
      this.customerId = customerId
      this.parentCategoryId = parentCategoryId
      this.type = 'edit'
      this.dataForm = dataForm

      this.url = '/resi/partymember/stylecategorydict/addorupdate'
    },

    async saveForm () {
      await this.$refs['dataForm'].validate((valid, messageObj) => {
        if (!valid) {
          window.app.util.validateRule(messageObj)
          return false
        }
      })

      let params = {
        customerId: this.customerId,
        categoryId: this.dataForm.categoryId,
        categoryName: this.dataForm.categoryName
      }

      const { data, code, msg } = await requestPost(this.url, params)
      if (code === 0) {
        this.$message({
          type: 'success',
          message: '保存成功'
        })
        this.resetData()
        this.visible = false
        this.$emit('editDiaOK')
      } else {
        // this.$message.error(msg)
      }
    },
    handleClose () {
      this.visible = false
    },
    resetData () {
      this.dataForm = {
        categoryName: '', // 分类名称
        sort: 0,
        type: ''// 操作类型(add:新增  edit:编辑)
      }
    }

  }
}
</script>

<style scoped>
.item_width_1 {
  width: 400px;
}
.item_width_2 {
  width: 700px;
}
.block {
  display: block;
}
.btn_reset {
  vertical-align: bottom;
  margin-left: 10px;
}
</style>