ioc-admin-ui/src/views/systemManagement/messageConfiguration/dailog/messageCreate.vue

<template>
  <div>
    <el-dialog
      v-dialog-drag
      class="dialog"
      title="新建消息模块"
      :visible.sync="dialogVisible"
      width="700px"
      left
    >
      <el-divider></el-divider>
      <div style="height: 530px">
        <el-scrollbar style="height: 100%">
          <el-form
            :model="form"
            label-position="left"
            label-width="80px"
          >
            <el-form-item label="模块名称：">
              <el-input
                v-model="form.template_name"
                class="template_name"
              ></el-input>
            </el-form-item>
            <el-form-item label="模块上级：">
              <el-select v-model="form.template_superior">
                <el-option
                  v-for="item in superiorOptions"
                  :value="item.value"
                  :key="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              :model="form.channelconfig"
              label="通道配置："
            >
              <el-checkbox
                label="短信"
                v-model="checked"
              ></el-checkbox>
              <el-checkbox label="邮件"></el-checkbox>
              <el-checkbox label="钉钉"></el-checkbox>
              <el-checkbox label="站内通知"></el-checkbox>
            </el-form-item>
            <el-form-item
              :model="form.personconfig"
              label="人员配置："
            >
              <el-checkbox
                label="全体"
                v-model="checked2"
              ></el-checkbox>
              <el-checkbox label="运管管理员"></el-checkbox>
              <div style="display: flex; margin-left: 0px;">
                <el-checkbox
                  style="margin-right: 10px;"
                  disabled
                ></el-checkbox><span>
                  <el-cascader
                    style="width: 300px;"
                    :options="options"
                    placeholder="选择角色/部门/单位"
                    filterable
                    disabled
                  >
                  </el-cascader>
                </span>
              </div>
            </el-form-item>
            <el-form-item
              :model="form.sendtiming"
              label="发送时间："
            >
              <el-radio
                v-model="radio"
                label="1"
                style="margin-top:13px"
              >定时</el-radio>
              <span>
                <el-date-picker
                  v-model="value"
                  type="datetime"
                  placeholder="选择日期时间"
                >
                </el-date-picker>
              </span>
            </el-form-item>
            <el-form-item>
              <el-radio
                v-model="radio"
                label="2"
              >立刻</el-radio>
            </el-form-item>
          </el-form>
        </el-scrollbar>
      </div>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          style="background: #2ea8e6"
          @click="nextMessage"
        >下一个</el-button>
        <el-button
          style="background: #2ea8e6; color: #fff"
          @click="resetForm('form')"
        >重置</el-button>
        <el-button
          type="primary"
          style="background: #2ea8e6"
          @click="submitForm('form')"
        >确认</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      checked: true,
      checked2: true,
      radio: "1",
      value: "",
      defaultProps: {
        children: "children",
        label: "label",
      },
      form: {},
      options: [],
      superiorOptions: [
        {
          value: "1",
          label: "普通消息",
        },
        {
          value: "2",
          label: "提醒消息",
        },
      ],
    };
  },

  methods: {
    resetForm() {},
    submitForm() {},
    nextMessage() {
      // 提交信息
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-dialog {
  height: 725px !important;
  .el-dialog__body {
    padding-top: 0px;
  }
}
.el-divider {
  margin-top: 10px !important;
  margin-bottom: 0px !important;
}

.el-form {
  //   padding-left: 30px;

  .el-form-item {
    padding-top: 20px;
    margin-inline: 20px;
    margin-bottom: 0;

    /deep/.el-form-item__label {
      padding: 0;
      font-size: 16px;
      color: #4d4d4d;
      font-weight: 550;
    }

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

    // /deep/.el-input__inner {
    //   //   width: 600px;
    // }
  }

  .el-checkbox {
    margin-right: 10px;
    margin-left: 10px;

    /deep/.el-checkbox__label {
      color: #4d4d4d;
    }
  }

  .el-cascader {
    /deep/.el-input__inner {
      width: 320px;
    }

    /deep/.el-input__suffix {
      right: -8px;
    }
  }

  .el-radio {
    margin-left: 20px;
  }

  .el-date-editor {
    /deep/.el-input__inner {
      width: 320px;
    }

    /deep/.el-input__suffix {
      right: -80px;
    }
  }

  .el-date-picker {
    width: 450px;

    /deep/.el-picker-panel__content {
      width: 370px;
    }
  }
}

// .template_name {
//   /deep/.el-input__inner {
//     float: left;
//   }
// }

// .el-tag {
//   position: relative;
//   background-color: transparent;
//   border-color: transparent;
//   font-size: 20px;
//   color: #4d4d4d;
//   right: 600px;
//   font-weight: 550;
//   margin-top: 20px;
// }

// .el-button--text {
//   position: absolute;
//   top: 70px;
//   right: 20px;
// }

.el-button {
  height: 30px;
  width: 100px;
  padding: 3px;
  color: #fff;
  background: #3da0d6;
  margin-right: 50px;
}

.bottom {
  position: absolute;
  left: 750px;
  bottom: 15px;
}
</style>