easydo-chengfa/src/components/scChengTou/approveIframe/userDept.vue

<template>
	<sc-dialog class="user-dept-dialog" v-model="visible" title="选择用户所属组织" :width="500" @closed="$emit('closed')">
		<el-form ref="dialogForm" :model="form" :rules="rules" label-width="112px">
			<el-form-item label="用户所属组织:" prop="startorOrgName">
				 <el-select v-model="form.startorOrgName" placeholder="请选择用户所属组织">
					<el-option v-for="item in depts" :key="item.id" :label="item.name" :value="item.name"></el-option>
				</el-select>
			</el-form-item>
		</el-form>

		<template #footer>
			<el-button @click="visible = false">取 消</el-button>
			<el-button type="primary" :loading="isSaveing" @click="submit">下一步</el-button>
		</template>
	</sc-dialog>
</template>

<script>
	export default {
		emits: ["closed"],

		data() {
			return {
				visible: false,
                depts: [],

				form: {
					startorOrgName: null
				},

				rules: {
					startorOrgName: [{ required: true, message: "请选择用户所属组织" }]
				}
			}
		},

		methods: {
			// 显示
			open(depts) {
				this.depts = depts;
				this.visible = true;
				return this;
			},

			// 表单提交方法
			submit() {
				this.$refs.dialogForm.validate(valid => {
					if (valid) {
                        this.visible = false;
                        this.$emit("closed", this.form.startorOrgName);
					} else {
						return false;
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.user-dept-dialog :deep(.el-dialog) {
  padding: var(--el-dialog-padding-primary) !important;
  background: var(--el-dialog-bg-color) !important;

  .el-dialog__header {
    display: flex !important;
    padding: calc(var(--el-dialog-padding-primary) / 2) 0 !important;

    &::after {
      display: block !important;
    }
  }

  .el-dialog__footer {
    display: block !important;
  }

  .el-dialog__body {
    padding: calc(var(--el-dialog-padding-primary) + 10px) 0 !important;

    .el-form {
      padding: 10px 30px;
    }
  }
}

@media (max-width: 992px) {
  .user-dept-dialog :deep(.el-dialog) .el-dialog__body .el-form {
    padding: 10px;
  }
}
</style>