yos_web/src/HManagement/department/modules/edit_dep.vue

<template>
  <div>
    <!-- <i style="font-weight:bold" class="el-icon-edit" @click="() => append()"></i> -->
    <!-- <el-button size="small"  type="text" icon="el-icon-edit" @click="() => append()">编 辑</el-button> -->
<!--    <p  @click="() => append()"><i style="font-weight:bold" class="el-icon-edit">&nbsp;编 辑</i></p>-->
    <el-tooltip class="item" effect="dark" content="编辑" placement="top-start">
      <p  @click="() => append()"><i style="font-weight:bold" class="el-icon-edit">&nbsp</i></p>
    </el-tooltip>

    <el-dialog title="编辑部门" append-to-body width="864px" :visible.sync="dialogDepVisible">
      <el-row :gutter="20">
        <el-form :model="form" :rules="rules" ref="form" size="small" label-width="100px" label-position="right">
          <el-col  :span="12">
            <el-form-item class="item_width-full" label="部门名称" prop="depname">
              <el-input class="item_width-full" v-model="form.depname" placeholder="请输入部门名称" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col  :span="12">
            <el-form-item class="item_width-full" label="部门编号" prop="depno">
              <el-input class="item_width-full" v-model="form.depno" placeholder="请输入部门编号" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">  
            <el-form-item class="item_width-full" label="部门描述" prop="remarks">
              <el-input class="item_width-full" v-model="form.remarks" placeholder="请输入部门描述" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">  
            <el-form-item class="item_width-full" label="排序">
              <el-input class="item_width-full" v-model="form.sequence" placeholder="请输入部门排序号" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否启用">
              <el-checkbox v-model="form.isused" :false-label="0" :true-label="1">是否启用</el-checkbox>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="dialog-footer">
        <el-button size="small" @click="dialogDepVisible = false" class="normal-btn-width">取 消</el-button>
        <el-button size="small" type="warning" @click="onSubmit" class="normal-btn-width btn-warning">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props:['data'],
  data () {
    return {
      dialogDepVisible:false,
      rules:{
        depname: [
          { required: true, message: '请输入部门名称', trigger: 'blur' },
        ],
        remarks: [
          { required: false, message: '请输入部门描述', trigger: 'blur' },
        ],
        depno:[
           { required: true, message: '请输入部门编号', trigger: 'blur' },
        ]
      },
      form:{
        depname:''
      }
    }
  },
  methods:{
    append () {
      this.form = Object.assign({},this.form,this.data)
      this.form.depname = this.form.label 
      this.dialogDepVisible = true
    },
    onSubmit () {
      this.$refs['form'].validate(async (valid) => {
        if (!valid)  return false;
        const res = await this.$api.requested({
          "classname": "webmanage.department.department",
          "method": "insertormodify_department",
          "content": this.form
        })
        this.tool.showMessage(res,()=>{
          this.$emit('onSuccess',this.form)
          this.dialogDepVisible = false
        })
      });
    }
  }
}

</script>
<style>
</style>
<style scoped>
.item_width-full{
  width:100%
}
.dialog-footer{
  margin-top:32px;
  text-align: center;
}
</style>