addDialog.vue

<template>
  <el-dialog
    custom-class="party-dialog"
    :title="title"
    width="468px"
    :visible.sync="formVisible"
    :before-close="close"
  >
    <div class="dialog-content">
      <el-form
        :model="formItem"
        class="party-form"
        ref="formItem"
        label-width="125px"
        label-position="top"
        :rules="rules"
      >
        <el-form-item label="所属单位：" prop="orgId">
          <el-select
            v-model="formItem.orgId"
            clearable
            placeholder="请选择所属单位"
            @change="selectItem"
          >
            <el-option
              v-for="item in orgOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="机构地理位置：" prop="areaName" required>
          <el-input
            v-model="formItem.areaName"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="账号有效期" prop="permanent">
          <el-radio-group v-model="formItem.permanent">
            <el-radio :label="true">永久有效</el-radio>
            <el-radio :label="false">设置有效期</el-radio>
          </el-radio-group>
          <div v-if="!formItem.permanent">
            <el-date-picker
              class="mt16"
              v-model="formItem.date"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer btn-group">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="submitForm('formItem')">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      title: "", // 标题
      formVisible: false,
      formItem: {},
      orgOptions: [], // 单位信息
      rules: {
        orgId: [
          { required: true, message: "请选择所属单位", trigger: "change" },
        ],
        permanent: [
          { required: true, message: "请选择账号有效期", trigger: "change" },
        ],
      },
    };
  },
  mounted() {},
  methods: {
    backFn(item) {
      this.formVisible = true;
      this.$nextTick(() => {
        this.$refs.formItem.clearValidate();
      });
      // 新增
      this.orgOptions = item;
      this.title = "新增";
      this.formItem = {
        permanent: true,
        date: "",
      };
    },
    // 关闭
    close() {
      this.formVisible = false;
      for (let key in this.formItem) {
        this.formItem[key] = null;
      }
      this.$refs["formItem"].resetFields();
    },
    // 联动出地址
    selectItem(val) {
      this.orgOptions.forEach((item) => {
        if (val === item.id) {
          this.formItem.areaName = item.areaName;
          this.formItem.areaId = item.areaId;
        }

        if (item.id === this.formItem.orgId) {
          this.formItem.userName = item.name;
        }
      });
    },
    // 保存编辑信息
    submitForm() {
      let _this = this;
      _this.$refs.formItem.validate((valid) => {
        if (valid) {
           if (!this.formItem.permanent && !this.formItem.date) {
            this.$message.error("请选择有效期");
            return false;
          }
          let searchObj = {};
          for (let key in _this.formItem) {
            if (this.formItem[key]) {
              searchObj[key] = _this.formItem[key]
            }
          }
          if (!this.formItem.permanent) {
            searchObj.effectiveDate = this.formItem.date[0];
            searchObj.exiredDate = this.formItem.date[1];
          }
          delete searchObj.date
          console.log(searchObj)
          _this
            .$https(
              {
                url: "tUser/boxAdd",
                method: "post",
                authType: this.backToken,
              },
              _this.$qs.stringify(searchObj)
            )
            .then(
              (res) => {
                if (res.data.resultCode === "200") {
                  _this.$message.success(res.data.message)
                  _this.formVisible = false
                  _this.$emit("refreshFn")
                } else {
                  _this.$message.error(res.data.message)
                }
              },
              (error) => {
                console.log(error)
              }
            )
        }
      })
    },
  },
};
</script>

<style lang="less">
</style>