ioc-admin-ui/src/views/systemManagement/infoConfiguration/dialog/createInfo.vue

<template>
  <div>
    <el-dialog
      v-dialog-drag
      class="dialog"
      title="新建人员配置"
      :visible.sync="dialogVisible"
      width="360px"
      left
    >
      <el-divider></el-divider>
      <el-form
        label-position="left"
        label-width="80px"
      >
        <el-form-item
          :model="form.typeName"
          label="类别名称："
        >
          <el-input v-model="value"></el-input>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          @click="dialogVisible = false"
          type="primary"
        >取消</el-button>
        <el-button
          type="primary"
          @click="sure"
        >确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import api from "@/api/infoConfig/api";
export default {
  props: {
    update: {
      type: Function,
    },
  },
  data() {
    return {
      value: "",
      dialogVisible: false,
      form: {
        typeName: "",
      },
    };
  },
  methods: {
    sure() {
      let that = this;
      api
        .addSecurityInfoConfiguration({
          name: this.value,
        })
        .then((result) => {
          if (result.data.code == 0) {
            that.$message.success("配置添加成功!");
            that.dialogVisible = false;
            // 刷新列表
            that.update();
          } else {
            that.$message.error("配置添加失败!");
          }
        })
        .catch((err) => {
          that.$message.error("配置添加失败!");
        });
    },
    close() {
      this.dialogVisible = false;
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.el-dialog {
  height: 295px !important;
}

.el-select {
  width: 280px;
}

.el-form {
  .el-form-item {
    margin-inline: 20px;
    // margin-bottom: 0;
  }

  /deep/.el-form-item__label {
    padding: 0;
  }

  /deep/.el-form-item__content {
    display: flex;
  }
}

// /deep/.el-dialog {
//   height: 30vh;
// }

// /deep/.el-dialog__title {
//   margin-right: 330px;
// }'
/deep/.el-dialog__header {
  padding-bottom: 0;
  color: #333333;
}

/deep/.el-dialog__headerbtn {
  font-size: 25px;
}

/deep/.el-dialog__body {
  padding: 0;
}

/deep/.el-divider--horizontal {
  display: block;
  height: 1px;
  width: 100%;
  margin: 0;
  // margin-left: 2.5%;
}

/deep/.el-dialog__footer {
  margin-top: 60px;
}

.el-button {
  width: 100px;
  height: 30px;
  text-align: center;
  margin: 30px;
  padding: 5px;
}
</style>