shinestar-portal/src/views/base/workPersonScheduling-change.vue

<template>
  <el-dialog
    :visible.sync="showDialog"
    :title="title"
    :modal-append-to-body="false"
    width="700px"
    style="text-align: left"
    @close="closeDialog"
    :close-on-click-modal="false"
    v-loading="loading"
  >
    <div>
      <el-form
        ref="queryForm"
        :model="queryModel"
        inline
        :rules="ruleValidate"
        class="demo-form-inline"
      >
        <el-row>
          <el-col>
            <el-form-item label="排班日期" prop="timeRanges">
              <el-date-picker
                v-model="queryModel.timeRanges"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :default-time="timeRangesDefaultTime"
                size="mini"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="部门" prop="companyId">
              <el-select-tree
                size="mini"
                :props="props"
                :options="companyResult"
                v-model="queryModel.companyId"
                height="200"
              ></el-select-tree>
            </el-form-item>
            <el-form-item label="员工" prop="personId">
              <el-select
                filterable
                multiple
                v-model="queryModel.personId"
                clearable
                size="mini"
                style="width: 200px"
              >
                <el-option
                  v-for="person in personInfoData"
                  :key="person.id"
                  :value="person.id"
                  :label="person.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                size="mini"
                icon="ios-search"
                @click="handleQuery('queryForm')"
                :loading="loading"
                >查询</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="von-cho">
        <div class="von-left">
          <div class="von-tit">可选班次</div>
          <ul>
            <li v-for="shift in shiftData" :key="shift.id">
              <a
                href="#"
                @click="selectShift(shift)"
                v-if="selectId == shift.id"
                class="active"
                >{{ shift.number }} - {{ shift.name }}</a
              >
              <a href="#" @click="selectShift(shift)" v-else
                >{{ shift.number }} - {{ shift.name }}</a
              >
            </li>
          </ul>
        </div>
        <div class="von-center">
          <el-button round size="mini" @click="moveUp">选择</el-button>
          <div style="height: 10px"></div>
          <el-button round size="mini" @click="moveDown">移除</el-button>
        </div>
        <div class="von-right">
          <div class="von-right-top">
            <div class="von-tit">排班规律表</div>
            <ul>
              <li>
                <a
                  href="#"
                  v-if="showTagNum == 1"
                  class="active"
                  @click="changeTag('1')"
                  >一</a
                >
                <a href="#" v-else @click="changeTag('1')">一</a>
                <p>{{ number1 }}</p>
              </li>
              <li>
                <a
                  href="#"
                  v-if="showTagNum == 2"
                  class="active"
                  @click="changeTag('2')"
                  >二</a
                >
                <a href="#" v-else @click="changeTag('2')">二</a>
                <p>{{ number2 }}</p>
              </li>
              <li>
                <a
                  href="#"
                  v-if="showTagNum == 3"
                  class="active"
                  @click="changeTag('3')"
                  >三</a
                >
                <a href="#" v-else @click="changeTag('3')">三</a>
                <p>{{ number3 }}</p>
              </li>
              <li>
                <a
                  href="#"
                  v-if="showTagNum == 4"
                  class="active"
                  @click="changeTag('4')"
                  >四</a
                >
                <a href="#" v-else @click="changeTag('4')">四</a>
                <p>{{ number4 }}</p>
              </li>
              <li>
                <a
                  href="#"
                  v-if="showTagNum == 5"
                  class="active"
                  @click="changeTag('5')"
                  >五</a
                >
                <a href="#" v-else @click="changeTag('5')">五</a>
                <p>{{ number5 }}</p>
              </li>
              <li>
                <a
                  href="#"
                  v-if="showTagNum == 6"
                  class="active"
                  @click="changeTag('6')"
                  >六</a
                >
                <a href="#" v-else @click="changeTag('6')">六</a>
                <p>{{ number6 }}</p>
              </li>
              <li>
                <a
                  href="#"
                  v-if="showTagNum == 7"
                  class="active"
                  @click="changeTag('7')"
                  >七</a
                >
                <a href="#" v-else @click="changeTag('7')">七</a>
                <p>{{ number7 }}</p>
              </li>
            </ul>
          </div>
          <div class="von-right-bot">
            <el-tag
              v-for="tag in showWorkTags"
              :key="tag.number"
              :value="tag.id"
              closable
              @close="closeTag(tag)"
              >{{ tag.name }}</el-tag
            >
          </div>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="submitting"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
import Constant from "@/constant";
import workPersonSchedulingApi from "@/api/base/workPersonScheduling";
import workShiftInfoApi from "@/api/base/workShiftInfo";
import companyInfoApi from "@/api/base/companyInfo";
import personRoleApi from "@/api/base/personRoleInfo";
import personInfoApi from "@/api/base/personInfo";
import SelectTree from "@/components/SelectTree";

export default {
  props: ["businessKey", "title"],
  data() {
    return {
      queryModel: {
        companyId: "",
        timeRanges: "",
        personId: "",
      },
      formModel: {},
      ruleValidate: {
        timeRanges: [
          { required: true, message: "请选择日期", trigger: "blur" },
        ],
        companyId: [
          { required: true, message: "请选择排班部门", trigger: "blur" },
        ],
      },
      showDialog: true,
      loading: false,
      submitting: false,
      companyResult: [],
      props: {
        // 配置项（必选）
        value: "id",
        label: "name",
        children: "children",
      },
      timeRangesDefaultTime: [],
      menuList: [],
      relatedMenus: [],
      rightCheckedItems: [],
      tableData: [],
      shiftData: [],
      uploadTags: [],
      schedulingIds: [],
      showName: "",
      showId: "",
      showNumber: "",
      showTagNum: "",
      currentRow: "",
      leftClickType: false,
      rightClickType: false,
      number1: "无",
      number2: "无",
      number3: "无",
      number4: "无",
      number5: "无",
      number6: "无",
      number7: "无",
      personInfoData: [],
      selectId: "",
      showWorkTags: [],
      showWorkTag1: [],
      showWorkTag2: [],
      showWorkTag3: [],
      showWorkTag4: [],
      showWorkTag5: [],
      showWorkTag6: [],
      showWorkTag7: [],
      numberArray1: [],
      numberArray2: [],
      numberArray3: [],
      numberArray4: [],
      numberArray5: [],
      numberArray6: [],
      numberArray7: [],
    };
  },
  created() {
    var self = this;

    companyInfoApi.treeList().then(function (response) {
      var jsonData = response.data;
      if (jsonData.result) {
        if (jsonData.data != null && jsonData.data != "") {
          self.companyResult = jsonData.data;
          self.tableData = jsonData.data;
        }
      }
    });
  },
  watch: {
    "queryModel.companyId": function (val, oldval) {
      if (val != null && val != "") {
        var self = this;
        var formData = new FormData();
        formData.append("companyId", val);
        personInfoApi.findByCompanyId(formData).then(function (response) {
          var jsonData = response.data;
          if (jsonData.result) {
            if (jsonData.data != null && jsonData.data != "") {
              self.personInfoData = jsonData.data;
            }
          }
        });
      }
    },
  },
  methods: {
    closeDialog() {
      this.$emit("close", false);
    },
    handleSubmit() {
      var self = this;

      this.$refs["queryForm"].validate((valid) => {
        if (valid) {
          var self = this;
          self.loading = true;
          var startDate = "";
          var endDate = "";
          var timeRanges = self.queryModel.timeRanges + "";

          if (timeRanges != "" && timeRanges != null) {
            timeRanges = timeRanges.split(",");
            startDate = timeRanges[0];
            endDate = timeRanges[1];
          }
          var formData = new FormData();
          formData.append("startDate", startDate);
          formData.append("endDate", endDate);
          //formData.append("schedulingIds", self.schedulingIds);
          formData.append("companyId", self.queryModel.companyId);
          formData.append("personId", self.queryModel.personId);

          //formData.append("companyId", "ee25ae8d-d102-4fcd-8d58-71e40f413337");

          var numberArray1 = [];
          var numberArray2 = [];
          var numberArray3 = [];
          var numberArray4 = [];
          var numberArray5 = [];
          var numberArray6 = [];
          var numberArray7 = [];
          for (var i = 1; i < 8; i++) {
            self["showWorkTag" + i].forEach((item, index) => {
              self["numberArray" + i].push(item.id);
            });

            var num = self["numberArray" + i].join(";");
            if (num != null && num != "") {
              self.schedulingIds.push(num);
            }
          }
          // self.showWorkTag1.forEach((item, index) => {
          //   numberArray1.push(item.id);
          // });

          // var numberArray2 = [];
          // self.showWorkTag2.forEach((item, index) => {
          //   numberArray2.push(item.id);
          // });

          // var numberArray3 = [];
          // self.showWorkTag3.forEach((item, index) => {
          //   numberArray3.push(item.id);
          // });

          // var numberArray4 = [];
          // self.showWorkTag4.forEach((item, index) => {
          //   numberArray4.push(item.id);
          // });

          // var numberArray5 = [];
          // self.showWorkTag5.forEach((item, index) => {
          //   numberArray5.push(item.id);
          // });

          // var numberArray6 = [];
          // self.showWorkTag6.forEach((item, index) => {
          //   numberArray6.push(item.id);
          // });

          // var numberArray7 = [];
          // self.showWorkTag7.forEach((item, index) => {
          //   numberArray7.push(item.id);
          // });

          // var num1 = numberArray1.join(";");
          // var num2 = numberArray1.join(";");
          // self.schedulingIds.push(num1);
          // self.schedulingIds.push(num1);
          // self.schedulingIds["3"] = numberArray3;
          // self.schedulingIds["4"] = numberArray4;
          // self.schedulingIds["5"] = numberArray5;
          // self.schedulingIds["6"] = numberArray6;
          // self.schedulingIds["7"] = numberArray7;

          formData.append("schedulingIds", self.schedulingIds);
          workPersonSchedulingApi
            .changeScheduling(formData)
            .then(function (response) {
              var jsonData = response.data;
              self.loading = false;
              if (jsonData.result) {
                self.$message({
                  message: "保存成功!",
                  type: "success",
                });

                self.$emit("close", true);
              } else {
                self.$message({
                  message: jsonData.message + "",
                  type: "warning",
                });

                self.$emit("close", false);
              }
            });
        }
      });
    },
    handleQuery() {
      var self = this;

      this.$refs["queryForm"].validate((valid) => {
        if (valid) {
          self.queryShiftInfo();
        }
      });
    },
    queryShiftInfo() {
      var self = this;
      var formData = new FormData();
      formData.append("companyId", self.queryModel.companyId);
      //formData.append("companyId", "ee25ae8d-d102-4fcd-8d58-71e40f413337");

      workShiftInfoApi.shiftList(formData).then(function (response) {
        var jsonData = response.data;
        if (jsonData.result) {
          if (jsonData.data != null && jsonData.data != "") {
            self.shiftData = jsonData.data;
          }
        }
      });
    },
    changeTag(tagNum) {
      var self = this;
      self.showTagNum = tagNum;

      var tagsName = "showWorkTag" + self.showTagNum;
      self.showWorkTags = this[tagsName];

      // if (self.uploadTags[tagNum] != null) {
      //   this.showName = self.uploadTags[tagNum];
      //   self.rightClickType = true;
      // } else {
      //   self.rightClickType = false;
      //   self.leftClickType = true;
      // }
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    moveUp() {
      var self = this;
      if (this.currentRow != "" && self.currentRow != null) {
        var flag = true;
        if (this.showWorkTags != null) {
          this.showWorkTags.forEach((item, index) => {
            if (item.id == self.currentRow.id) {
              flag = false;
            }
          });
        }

        if (flag) {
          var tag = {
            id: self.currentRow.id,
            number: self.currentRow.number,
            name: self.currentRow.name,
          };
          var tagsName = "showWorkTag" + self.showTagNum;
          self.showWorkTags.push(tag);
          self[tagsName] = self.showWorkTags;
          var numberName = "number" + self.showTagNum;

          // var nums = [];
          // self.showWorkTags.forEach((item, index) => {
          //   nums.push(item.number);
          // });

          //var num = nums.join(",");
          self[numberName] = "√";

          //self.showId = self.currentRow.id + ",";

          //self.schedulingIds[self.showTagNum] = self.showWorkTags;
        }

        // if (this.showTagNum != "" && self.showTagNum != null) {
        //   self.showId = self.currentRow.id;
        //   self.showName = self.currentRow.name;
        //   self.showNumber = self.currentRow.number;
        //   self.leftClickType = true;
        //   self.rightClickType = true;
        //   self.uploadTags[this.showTagNum] = self.showName;
        //   self.schedulingIds[this.showTagNum] = self.showId;
        //   var numberName = "number" + self.showTagNum;
        //   self[numberName] = self.showNumber;
        //   self.selectId = self.currentRow.id;
        //   var tag = {
        //     id: self.currentRow.id,
        //     number: self.currentRow.number,
        //     name: self.currentRow.name,
        //   };
        //   self.showWorkTags.push(tag);
        // }
      }
    },
    moveDown() {
      var self = this;
      // if (this.showTagNum != "" && this.showTagNum != null) {
      //   this.uploadTags[this.showTagNum] = null;
      //   this.schedulingIds[this.showTagNum] = null;
      //   this.rightClickType = false;
      //   var numberName = "number" + this.showTagNum;
      //   this[numberName] = "0";
      //   this.selectId = "";

      //   var tag = {
      //     id: self.currentRow.id,
      //     number: self.currentRow.number,
      //     name: self.currentRow.name,
      //   };
      //   self.showWorkTags.splice(tag, 1);
      // }

      if (this.currentRow != "" && self.currentRow != null) {
        if (self.showWorkTags != null) {
          var tag = {
            id: self.currentRow.id,
            number: self.currentRow.number,
            name: self.currentRow.name,
          };
          this.showWorkTags.splice(this.showWorkTags.indexOf(tag), 1);

          var tagsName = "showWorkTag" + self.showTagNum;
          this.showWorkTags.splice(this.showWorkTags.indexOf(tag), 1);
          this.self[tagsName].splice(this.showWorkTags.indexOf(tag), 1);
        }
      }
    },
    closeTag(tag) {
      if (this.showWorkTags != null) {
        this.showWorkTags.splice(this.showWorkTags.indexOf(tag), 1);
      }

      // if (this.showTagNum != "" && this.showTagNum != null) {
      //   this.uploadTags[this.showTagNum] = null;
      //   this.schedulingIds[this.showTagNum] = null;
      //   this.rightClickType = false;
      //   var numberName = "number" + this.showTagNum;
      //   this[numberName] = "0";
      //   this.selectId = "";
      // }
    },
    selectShift(shift) {
      this.currentRow = shift;
      this.selectId = shift.id;
    },
  },
  mounted() {
    //this.queryRelatedMenuList();
  },
  components: {
    "el-select-tree": SelectTree,
  },
};
</script>

<style scoped>
.user-panel {
  margin: 10px auto;
}
</style>
<style lang="scss">
.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: flex;
  flex-direction: col;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
</style>
<style>
* {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
  color: #101010;
}
body {
  font-size: 14px;
  color: #101010;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}
.von-cho {
  display: flex;
  align-items: center;
  height: 332px;
  justify-content: space-between;
}
.von-left,
.von-right {
  height: 100%;
  width: 40%;
}
.von-left,
.von-right-top,
.von-right-bot {
  border: 1px solid #eaedf4;
  border-radius: 5px;
  overflow: hidden;
}
.von-right-bot {
  padding: 11px 15px;
}
.von-tit {
  background: #f3f6f9;
  padding: 11px 15px;
  font-size: 16px;
}
.von-left ul {
  overflow-y: scroll;
  height: 100%;
  padding: 10px 0;
}
.von-left li,
.von-center {
  display: flex;
  flex-flow: column;
}
.von-left li a {
  padding: 5px 15px;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.von-left li .active {
  background: #f3f6f9;
  color: #3894ff;
}
.von-center button {
  padding: 5px 15px;
  margin: 5px 10px;
  border-radius: 5px;
  box-shadow: initial;
}
.von-right {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
}
.von-right-top {
  margin-bottom: 10px;
}
.von-right-top ul {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}
.von-right-top ul li {
  color: #888;
  font-size: 12px;
  display: flex;
  flex-flow: column;
  align-items: center;
  margin-bottom: 10px;
}
.von-right-top ul li a {
  display: block;
  margin-bottom: 5px;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
}
.von-right-top ul li .active {
  border-radius: 50%;
  background: rgba(22, 119, 255, 0.25);
}
.von-right-top ul li p {
  width: 16px;
  height: 16px;
  line-height: 16px;
  border-radius: 50%;
  background: #1677ff;
  color: white;
  text-align: center;
  font-size: 80%;
}
/* .von-right-top ul li:last-child p {
  background: #33bb00;
} */
.von-right-bot {
  flex: 1;
}
.von-right-bot ul {
  padding: 5px;
  display: flex;
  flex-wrap: wrap;
}
.von-right-bot ul li {
  background: #d0deff;
  border: 1px solid #7ca5df;
  padding: 3px 5px;
  margin: 5px;
  border-radius: 3px;
}
.von-right-bot ul li a {
  margin-left: 5px;
  color: #5682bf;
}
</style>