ioc-admin-ui/src/views/systemManagement/infoConfiguration/dialog/createPeople.vue

<template>
  <div>
    <el-dialog
      v-dialog-drag
      class="dialog"
      title="新建人员配置"
      :visible.sync="dialogVisible"
      @before-close="close"
      width="600px"
      left
    >
      <el-divider></el-divider>
      <el-form
        label-position="left"
        label-width="80px"
      >
        <el-form-item label="人员类别：">
          <el-select
            v-model="personnelCategoryIndex"
            placeholder="请选择"
            disabled
          >
            <el-option
              v-for="item in personnelCategory"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职责范围：">
          <el-input
            placeholder="请输入内容"
            v-model="form.responsibility_range"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="人员名单：">
          <el-select
            v-model="form.staff_list"
            multiple
            placeholder="请选择"
            value-key="id"
          >
            <el-option
              v-for="item in peopleArr"
              :key="item.id"
              :label="item.name"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="值班日期：">
          <el-date-picker
            v-model="form.duty_time.start_time"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker> 至
          <el-date-picker
            v-model="form.duty_time.stop_time"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="备注："
          style="display:block"
        >
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="form.remark"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          @click="close"
          type="primary"
        >取消</el-button>
        <el-button
          type="primary"
          @click="sure"
        >确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import api from "@/api/infoConfig/api";
export default {
  props: {
    itemInfo: {
      type: Object,
    },
    update: {
      type: Function,
    },
  },
  data() {
    return {
      value: "",
      dialogVisible: false,
      form: {
        personnel_type: "1",
        responsibility_range: "",
        staff_list: [],
        duty_time: {
          start_time: "",
          stop_time: "",
        },
        remark: "",
      },
      personnelCategoryIndex: "1",
      personnelCategory: [
        {
          value: "1",
          label: "驻地物业",
        },
      ],
      peopleArr: [],
    };
  },
  mounted() {
    this.getPersonList();
  },
  methods: {
    getPersonList() {
      api
        .getPersonList({ type_id: 1 })
        .then((result) => {
          // "access": null,
          // "account": null,
          // "address": null,
          // "car_number": null,
          // "card_number": null,
          // "company_id": null,
          // "company_name": null,
          // "create_time": null,
          // "dept_id": null,
          // "dept_name": null,
          // "duty": null,
          // "email": null,
          // "floor": null,
          // "function_type": null,
          // "hiredate": null,
          // "hr_number": null,
          // "id": 3,
          // "id_card": null,
          // "impower_time": null,
          // "in_out": null,
          // "is_del": 0,
          // "issue_status": null,
          // "name": "\u5f20\u707f",
          // "operate_status": null,
          // "phone": "010-68799999-6688",
          // "physics_card": null,
          // "role": null,
          // "room_number": null,
          // "site_number": "0399",
          // "status": 0,
          // "type": 1,
          // "update_time": null,
          // "work_address": null,
          // "zy_number": null
          this.peopleArr = result.data.data;
        })
        .catch((err) => {});
    },
    sure() {
      let that = this;
      let form = JSON.parse(JSON.stringify(this.form));
      form.duty_time.start_time = this.$dayjs(form.duty_time.start_time).format(
        "YYYY-MM-DD HH:mm:ss"
      );
      form.duty_time.stop_time = this.$dayjs(form.duty_time.stop_time).format(
        "YYYY-MM-DD HH:mm:ss"
      );
      form.duty_time = JSON.stringify(form.duty_time);
      form.staff_list = JSON.stringify(
        form.staff_list.map(function (item) {
          return {
            id: item.id,
            details: item,
          };
        })
      );
      form.id = this.itemInfo.data.id;
      // console.log(form); 
      const loading = this.$loading({
        lock: true,
        text: "新建中，请稍后！",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
        customClass: "systemConfigLoading",
      });
      // setTimeout(() => {
      //   loading.close();
      //   this.update();
      //   this.$message.success("添加成功!");
      //   this.dialogVisible = false;
      // }, 1000);
      // return;
      api
        .addPerson(form)
        .then((result) => {
          loading.close();
          if (result.data.code == 0) {
            this.update();
            this.$message.success("添加成功!");
            this.dialogVisible = false;
          } else {
            this.$message.error("添加失败!");
          }
        })
        .catch((err) => {
          this.$message.error("添加失败!");
        });

      // setTimeout(() => {
      // loading.close();
      // that.dialogVisible = true;
      // }, 2000);
    },
    close() {
      // this.form = {
      //   personnelCategoryIndex: "",
      //   responsibilities: "",
      //   people: [],
      //   beizhu: "",
      //   start: "",
      //   stop: "",
      // };
      this.dialogVisible = false;
    },
  },
  watch: {
    dialogVisible(newVal) {
      if (newVal) this.getPersonList();
    },
  },
};
</script>

 
<style lang="less" scoped>
.el-select {
  width: 280px;
}

.el-form {
  .el-form-item {
    margin-inline: 20px;
  }

  /deep/.el-form-item__label {
    padding: 0;
  }

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

/deep/.el-dialog__header {
  padding-bottom: 0;
  color: #333333;
}

/deep/.el-dialog__headerbtn {
  font-size: 25px;
}

/deep/.el-dialog__body {
  padding: 0;
}

/deep/.el-divider--horizontal {
  display: block;
  height: 1px;
  width: 100%;
  margin: 0;
  // margin-left: 2.5%;
}

// /deep/.el-dialog__footer {
//   // margin-top: 60px;
// }

.el-button {
  width: 100px;
  height: 30px;
  text-align: center;
  padding: 5px;
}
.el-image {
  width: 380px;
  height: 120px;
  cursor: pointer;
}
// .el-image + div {
// }
</style>