The effect

component

<template>
  <div class="RegDialog" v-if="visible">
    <el-dialog
      :visible="dialogVisible"
      v-bind="$attrs"
      v-on="$listeners"
      :title="$attrs. Title | | 'registered'." "
      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="Service Process" prop="server" v-if="list.length ! = = 0">
            <el-select v-model="formData.server" placeholder="Please select service process">
              <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="Service Process" prop="server" v-if="treeList.length ! = = 0">
            <el-select
              ref="selectRef"
              v-model="formData.server"
              placeholder="Please select service process"
              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="Completion Date" prop="data">
            <el-date-picker
              v-model="formData.data"
              type="date"
              placeholder="Please select completion date"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item label="Handler" prop="name">
            <el-input
              v-model.trim="formData.name"
              maxlength="50"
              placeholder="Please enter handler"
            ></el-input>
          </el-form-item>
          <el-form-item class="whole-line" label="Note" prop="remark">
            <el-input
              type="textarea"
              placeholder="Please enter remarks"
              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>save</my-button>
          <my-button @click.native="cancel">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: "Please select service process".trigger: "blur"],},data: [{required: true.message: "Please select completion date".trigger: "blur"],},name: [{required: true.message: "Please enter handler".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
            }
            letformData = { ... 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>

Copy the code

use

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

instructions

Component description

attribute

The property name instructions type The default value
title Text at the upper left corner of the pop-up box String Is dealt with register
visible.sync Popover opens closed variables Boolean false
list Ordinary drop-down Array []
treeList The tree down Array []
operator agent String “”

The sample

list: [
  / / {
  // value: 2,
  // label: "display name ",
  // },
  / / {
  // value: 3,
  // label: "display name 3",
  // },].treeList: [{label: "Level 1".children: [{label: "The secondary 1-1".children: [{label: "Triple the 1-1-1".id: 111,},],},],},Copy the code

The event

The method name instructions parameter
getFormData Get form data (click Save callback executed) {}

Parameters of the sample

formData: {
    server: "".// Service process
    data: "".// Completion date
    name: ""./ / agent
    remark: ""./ / note
},
Copy the code