ElementUI 组件封装之 el-dialog

效果

组件

<template>
  <div class="RegDialog" v-if="visible">
    <el-dialog
      :visible="dialogVisible"
      v-bind="$attrs"
      v-on="$listeners"
      :
      width="600px"
      @close="close"
    >
      <template slot="title">
        <slot name="title"></slot>
      </template>
      <slot>
        <el-form
          :model="formData"
          ref="formRef"
          :rules="rules"
          class="form-style-overlay"
        >
          <el-form-item label="服务进程" prop="server" v-if="list.length !== 0">
            <el-select v-model="formData.server" placeholder="请选择服务进程">
              <el-option
                v-for="item in list"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="服务进程" prop="server" v-if="treeList.length !== 0">
            <el-select
              ref="selectRef"
              v-model="formData.server"
              placeholder="请选择服务进程"
              popper-class="regdialog"
            >
              <template slot="empty">
                <el-tree
                  :data="treeList"
                  :props="defaultProps"
                  @node-click="handleNodeClick"
                ></el-tree>
              </template>
            </el-select>
          </el-form-item>
          <el-form-item label="完成日期" prop="data">
            <el-date-picker
              v-model="formData.data"
              type="date"
              placeholder="请选择完成日期"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item label="经办人" prop="name">
            <el-input
              v-model.trim="formData.name"
              maxlength="50"
              placeholder="请输入经办人"
            ></el-input>
          </el-form-item>
          <el-form-item class="whole-line" label="备注" prop="remark">
            <el-input
              type="textarea"
              placeholder="请输入备注"
              v-model="formData.remark"
              maxlength="1000"
              show-word-limit
              :autosize="{ minRows: 6, maxRows: 6 }"
            ></el-input>
          </el-form-item>
        </el-form>
      </slot>
      <template slot="footer">
        <slot name="footer">
          <my-button @click.native="save" checked>保存</my-button>
          <my-button @click.native="cancel">取消</my-button>
        </slot>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import MyButton from "@/components/ProjectStaging/MyButton.vue";

export default {
  inheritAttrs: false,
  name: "RegDialog",
  components: {
    MyButton,
  },
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    list: {
      type: Array,
      default: () => {
        return []
      },
    },
    treeList: {
      type: Array,
      default: () => {
        return []
      },
    },
    operator: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
     
      defaultProps: {
        children: "children",
        label: "label",
      },
      dialogVisible: false,
      formData: {
        server: "",
        data: "",
        name: this.operator,
        remark: "",
      },
      currentId:'',
      rules: {
        server: [
          {
            required: true,
            message: "请选择服务进程",
            trigger: "blur",
          },
        ],
        data: [
          {
            required: true,
            message: "请选择完成日期",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "请输入经办人",
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {
    visible(val) {
      // this.dialogVisible = this.visible;
      // console.log(val)
      // console.log(this.visible)
      this.dialogVisible = val;
    },
  },
  methods: {
    handleNodeClick(data, node) {
      console.log(data,node)
      if (!data.children) {
        this.currentId = data.id
        this.$refs.selectRef.blur();
        this.formData.server = data.label;
        let serveName = [];
        function joinName(node) {
          if (!node.parent) return;
          serveName.unshift(node.data.label);
          joinName(node.parent);
        }
        joinName(node);
        this.formData.server = serveName.join(" - ")
      }
    },
    save() {
      typeof this.$refs.formRef.validate === "function" &&
        this.$refs.formRef.validate((valid) => {
          console.log(valid);
          if (valid) {
            console.log(this.formData);
            if(this.list.length === 0){
              this.formData.server = this.currentId
            }
            let formData = { ...this.formData };
            this.$emit("getFormData", formData);
            this.dialogVisible = false;
          }
        });
    },
    cancel() {
      this.dialogVisible = false;
    },
    close() {
      this.$emit("update:visible", false);
      typeof this.$refs.formRef.resetFields === "function" &&
        this.$refs.formRef.resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.RegDialog {
  /deep/.el-select-dropdown {
    max-height: 230px !important;
    overflow: auto !important;
  }
  .form-style-overlay .el-form-item {
    width: 100%;
    padding-right: 0;
    /deep/ .el-form-item__content {
      margin-right: 0 !important;
      margin-left: 0 !important;
    }
  }
  /deep/.my-button .el-button {
    width: 80px;
  }
  /deep/.el-select-approval {
    .el-select-dropdown {
      min-width: initial;
      width: 50% !important;
      left: 0 !important;
      border-top: 1px solid #d6d6d6;
      border-bottom: 1px solid #d6d6d6;
    }
    .el-select-dropdown__item {
      padding: 0;
      border-radius: 6px;
      .el-tree {
        padding: 6px 0;
      }
      .el-tree--highlight-current
        .el-tree-node.is-current
        > .el-tree-node__content {
        color: #4260db !important;
      }
      .el-tree-node__label {
        font-size: 14px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        padding-right: 10px;
      }
    }
    .el-select-dropdown__item.hover,
    .el-select-dropdown__item:hover {
      background: #eaeaea;
    }
  }
}
</style>

使用

 <RegDialog
        :visible.sync="dialogVisible"
        :list="list"
        :treeList="treeList"
        
        operator="xxx"
        @getFormData="getFormData"
      ></RegDialog>

说明

组件说明

属性

示例

list: [
  // {
  //   value: 2,
  //   label: "展示的名字",
  // },
  // {
  //   value: 3,
  //   label: "展示的名字3",
  // },
],
treeList: [
  {
    label: "一级 1",
    children: [
      {
        label: "二级 1-1",
        children: [
          {
            label: "三级 1-1-1",
            id: 111,
          },
        ],
      },
    ],
  },
],

事件

参数示例

formData: {
    server: "", // 服务进程
    data: "", // 完成日期
    name: "", // 经办人
    remark: "", // 备注
},