X-web/src/views/modules/tech-manage/material-tech-note-change.vue

<template>
  <div>
    <div class="my-title">变更通知人设置</div>
    <!-- 表单 -->
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      label-width="auto"
    >
      <el-row class="my-row">
        <el-form-item label="通知接收人" prop="userIds">
          <user-components
            v-model="dataForm.userIds"
            :userIds.sync="dataForm.userIds"
            @change="userSelectedChanged"
          />
        </el-form-item>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="onChose">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </div>
</template>

<script>
import UserComponents from "../common/user-components";
export default {
  name: "material-tech-note-change",
  components: {
    UserComponents,
  },
  data() {
    return {
      visible: false,
      dataForm: {
        userIds: [],
      },
      dataRule: {
        userIds: [
          { required: true, message: "请选择通知接收人", trigger: "change" },
        ],
      },
    };
  },
  created() {},
  methods: {
    onChose() {
      this.$emit("onChose");
    },
    async init() {
      this.dataForm = {};
      this.$http({
        url: this.$http.adornUrl(
          `/biz-service/pro-technology-option/noteChangeConfig`
        ),
        method: "get",
      }).then(({ data }) => {
        if (data && data.code === "200") {
          this.dataForm = {
            userIds: data.data,
          };
        }
      });
      this.visible = true;
    },
    validateField(type) {
      this.$refs.dataForm.validateField(type);
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(
              `/biz-service/pro-technology-option/noteChangeConfig`
            ),
            method: "post",
            data: this.dataForm.userIds,
          }).then(({ data }) => {
            if (data && data.code === "200") {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.onChose();
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
    userSelectedChanged(val) {
      this.dataForm.userIds = val;
    },
  },
};
</script>

<style scoped></style>