增删改

<template>
  <div class="serviceCenterConfigurationListEdit">
    <div style="margin: 0 auto 10px auto;width: 95%;height: 90%;">
      <div style="height:50px">
        <div style="color:#9e1618;display: inline;line-height: 60px;">配置清单信息</div>
        <button class="btn" style="float: right;" @click="showDialog('', 'add')"><i class="el-icon-c_xinzeng"></i><span>新增</span> </button>
      </div>
      <searchTable rowkey="id" :data="CurrentData" :pageSize="30" :pagination='false' border>
        <el-table-column :width="item.width" align="left" v-for="item in CurrentTable" :prop="item.prop" :label="item.title" :key="item.prop">
        </el-table-column>
        <el-table-column width="160" label="操作" align="right" fixed="right">
          <template slot-scope="scope" style="display: inline-block;" >
            <div class="table-operation-btn" style="justify-content: center;">
              <div class="operationBtn" @click="showDialog(scope.row, 'edit')">
                <i class="el-icon-cz_bianji" />
                <span>编辑</span>
              </div>
              <div class="operationBtn" @click="deletData(scope.row)">
                <i class="el-icon-cz_shanchu" />
                <span>删除</span>
              </div>
            </div>
          </template>
        </el-table-column>
      </searchTable>
    </div>
    <el-dialog :title="CurrenDialogState +'配置清单'" :visible.sync="DialogVisible" :close-on-click-modal="false" width="40%">
      <div class="dialog-content-wrapper">
        <el-form :model="CurrentDialogData" label-width="56px" :rules="formRules" ref="CurrentDialogData">
          <el-row>
            <el-col :span="12">
              <el-form-item label="名称" prop="configurationType" >
                <el-input v-model="CurrentDialogData.configurationType" placeholder="请输入名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="数量" prop="quantity">
                <el-input v-model="CurrentDialogData.quantity" placeholder="请输入数量"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="cancel-btn"   @click="DialogVisible = false">取消</div>
        <div class="confirm-btn" @click="save('CurrentDialogData')">确定</div>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getpartyMassesConfigurationsList, addpartyMassesConfiguration, updatepartyMassesConfiguration, getpartyMassesConfigurationdetail, deltepartyMassesConfiguration } from '@/api/partyMasses'

export default {

  data: function () {
    var checkNumber = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请填入数量'))
      }
      setTimeout(() => {
        const reg = /(^[1-9]([0-9]*)$|^[0-9]$)/
        if (!reg.test(value)) {
          callback(new Error('校验格式错误'))
        } else {
          callback()
        }
      }, 1000)
    }
    return {
      userId: '',
      CurrentTable: [
        {
          title: '名称',
          prop: 'configurationType'
        }, {
          title: '数量',
          prop: 'quantity'
        }
      ],
      CurrenDialogState: '新增',
      CurrentData: [],
      DialogVisible: false,
      CurrentDialogData: {},
      formRules: {
        configurationType: [
          { required: true, message: '请填入名称', trigger: 'blur' }
        ],
        quantity: [
          { required: true, validator: checkNumber, trigger: 'blur' }
        ]
      },
      partyMassesId: null,
      query: {
        pageNum: 1,
        pageSize: 0// 此接口api约定0默认查所有
      },
      total: 0
    }
  },
  methods: {
    // 弹出新增界面
    showDialog (row, value) {
      if (value === 'add') {
        this.CurrenDialogState = '新增'
      } else {
        this.getDetail(row.partyMassesConfigurationId)
        this.CurrenDialogState = '编辑'
      }
      this.DialogVisible = true
    },
    // 新增&编辑保存
    save (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.CurrenDialogState === '编辑') {
            this.sendRequest('edit', Object.assign({}, this.CurrentDialogData))
          } else {
            this.CurrentDialogData.partyMassesId = this.partyMassesId
            this.sendRequest('add', Object.assign({}, this.CurrentDialogData))
          }
        } else {
          return false
        }
      })
    },
    // 删除
    deletData: function (row) {
      this.$confirm('确定删除该信息吗?', '提示', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.CurrenDialogState = '删除'
        this.sendRequest('del', row.partyMassesConfigurationId)
      })
    },
    // 得到列表数据
    fetchList () {
      var query = { ...this.query, partyMassesId: this.partyMassesId }
      getpartyMassesConfigurationsList(query).then(data => {
        this.CurrentData = data.list
        this.total = data.total
      })
    },
    // 得到数据详情
    getDetail (relationId) {
      getpartyMassesConfigurationdetail(relationId).then(data => {
        this.CurrentDialogData = data
      })
    },
    // 根据类型发请求
    sendRequest (type, payload) {
      switch (type) {
        case 'add':addpartyMassesConfiguration(payload).then(this.sendRequestCallback); break
        case 'edit':updatepartyMassesConfiguration(payload).then(this.sendRequestCallback); break
        case 'del':deltepartyMassesConfiguration(payload).then(this.sendRequestCallback); break
        default : break
      }
    },
    // 请求后的回调
    sendRequestCallback(data) {
      this.fetchList()
      this.$notify({
        title: '成功',
        message: this.CurrenDialogState + '成功',
        type: 'success',
        duration: 2000
      })
      this.DialogVisible = false
    }
  },
  // 监听弹框的状态并进行初始化
  watch: {
    DialogVisible (newVal, oldVal) {
      if (!newVal && oldVal) {
        if (this.$refs['CurrentDialogData']) {
          this.$refs['CurrentDialogData'].resetFields()
        }
        this.CurrentDialogData = {}
      }
    },
    partyMassesId: function(newVal) {
      if (newVal) {
        this.CurrentData = []
        this.fetchList()
      }
    }
  },
  activated() {
    if (this.initialTag) {
      this.partyMassesId = this.$route.query.partyMassesId
    }
  },
  created () {
    this.initialTag = true
    this.partyMassesId = this.$route.query.partyMassesId
  }
}
</script>
<style lang="less">
  .serviceCenterConfigurationListEdit{
    margin: 0 auto;
    width: 90%;
    height: 100%;
    .cell{
      white-space: nowrap;
    }
      .searchTable .searchTable_main {
        overflow: auto;
        height: 550px;
      }
  }
</style>