peisweb/src/components/unitGrouping/unitGroupingTable.vue

<template>
  <div style="display: flex">
    <el-table
      :data="personnelUnit.personnelgrouping"
      style="width: 100%"
      row-key="id"
      highlight-current-row
      @row-click="clickoncolumn"
      class="el-table__body-wrapper tbody"
    >
      <el-table-column type="index" label="序号" width=""> </el-table-column>
      <el-table-column prop="displayName" label="名称" width="">
      </el-table-column>

      <el-table-column prop="creatorName" label="创建者"> </el-table-column>
      <el-table-column prop="" label="创建时间">
        <template slot-scope="scope">
          {{ scope.row.creationTime | dateFormat }}
        </template>
      </el-table-column>

      <el-table-column prop="forSexId" label="性别"> </el-table-column>
      <el-table-column prop="maritalStatusId" label="婚姻状况">
      </el-table-column>
      <el-table-column prop="price" label="价格"> </el-table-column>
      <el-table-column label="操作">
        <template>
          <el-tag
            class="move"
            style="cursor: move; margin-left: 15px"
            draggable="true"
          >
            <i class="el-icon-d-caret" style="width: 1rem; height: 1rem"></i>
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 3%; margin-left: 10px">
      <div style="margin-left: 10px; margin-top: 5%">
        <div style="margin-top: 10px">
          <el-button type="primary" @click="groupaddtion">新增</el-button>
        </div>
        <div style="margin-top: 10px">
          <el-button type="success" @click="editgroup">编辑</el-button>
        </div>
        <div style="margin-top: 10px">
          <el-button type="danger" @click="deletegroup">删除</el-button>
        </div>
        <div style="margin-top: 10px">
          <el-button type="primary" @click="topping">置顶</el-button>
        </div>
        <div style="margin-top: 10px">
          <el-button type="primary" @click="bottoming">置低</el-button>
        </div>
        <div style="margin-top: 10px">
          <el-button type="primary" @click="sortok" :disabled="isshow"
            >确定</el-button
          >
        </div>
      </div>
    </div>
    <!-- 新增或者编辑弹框 -->
    <el-dialog
      :title="title == '1' ? '新增' : '编辑'"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <el-form :model="form" label-width="80px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="分组名称">
              <el-input v-model="form.displayName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="价格">
              <el-input v-model="form.price"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="适用性别">
              <el-select v-model="form.forSexId" placeholder="请选择">
                <el-option
                  v-for="item in forSexId"
                  :key="item.id"
                  :label="item.displayName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="婚姻状况">
              <el-select
                v-model="form.maritalStatusId"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in maritalStatusId"
                  :key="item.id"
                  :label="item.displayName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="年龄下限">
              <el-input v-model="form.ageLowerLimit"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="年龄上限">
              <el-input v-model="form.ageUpperLimit"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="适用职务">
              <el-input v-model="form.jobPost"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="适用职称">
              <el-input v-model="form.jobTitle"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="备注">
              <el-input v-model="form.remark"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="Onsubmint">确 定</el-button>
      </span>
    </el-dialog>
    <!--  -->
  </div>
</template>
<script>
import nat from "@/views/customerOrg/customerOrgGroup.vue";
import Sortable from "sortablejs";
import { getapi, postapi, putapi, deletapi } from "@/api/api";
import { mapState } from "vuex";
export default {
  data() {
    return {
      isshow: true,
      title: 1,
      form: {
        displayName: "",
        price: "",
        forSexId: "",
        maritalStatusId: "",
        ageLowerLimit: "",
        ageUpperLimit: "",
        jobPost: "",
        jobTitle: "",
        remark: "",
      },
      forSexId: [], //性别id
      maritalStatusId: [], //婚姻状况
      dialogVisible: false,
      tableData: [],
      initTableData: [],
      // tableData: [

      // ],
    };
  },
  computed: {
    ...mapState(["personnelUnit"]),
  },
  created() {
    this.rowDrop();
  },
  mounted() {
    //console.log('00000',this.personnelUnit.id);
  },
  methods: {
    //确定排序
    sortok() {
      const result = [];
      this.tableData.forEach((item, index) => {
        // index 从0开始的， 你的displayOrder从大到小排
        console.log(item.id);
        // const currentDisplayOrder = this.tableData.length -1
        const currentDisplayOrder = this.initTableData[index].displayOrder;
        if (item.displayOrder != currentDisplayOrder) {
          // 如果它的displayOrder和它当前所在的位置不同代表挪动过位置
          result.push({ id: item.id, displayOrder: currentDisplayOrder });
        }
      });
      putapi("/api/app/customerorggroup/updatesortmany", {
        itemList: result,
      }).then((res) => {
        this.$message.success("操作成功");
        this.isshow = true;
        this.getlist();
      });
    },
    //初始化Sortable组件
    rowDrop() {
      this.$nextTick(() => {
        const tbody = document.querySelector(".el-table__body-wrapper tbody");
        const _this = this;
        Sortable.create(tbody, {
          handle: ".move",
          animation: 300,
          onEnd({ newIndex, oldIndex }) {
            _this.isshow = false;
            const currRow = _this.tableData.splice(oldIndex, 1)[0];
            _this.tableData.splice(newIndex, 0, currRow);
            _this.tableData.map((item, index) => {
              if (index == newIndex && index == oldIndex) {
              } else if (index == oldIndex) {
              } else if (index == newIndex) {
              }
            });
            console.log(_this.tableData.map((item) => item.displayOrder));
          },
        });
      });
    },
    getlist() {
      getapi(
        `/api/app/customer-org-group/in-customer-org-id/${this.personnelUnit.id}`
      ).then((res) => {
        this.tableData = res.data;
        this.personnelUnit.personnelgrouping = res.data;
        this.initTableData = [...res.data];
        // console.log( this.personnelUnit.personnelgrouping);
      });
    },
    //置低
    bottoming() {
      if (this.form.id == undefined) {
        this.$message.warning("请选择操作的数据");
      } else {
        putapi(
          `/api/app/customerorggroup/updatemanysort?id=${this.form.id}&SortType=2`
        ).then((res) => {
          this.$message.success("操作成功");
          this.getlist();
        });
      }
    },
    //置顶
    topping() {
      if (this.form.id == undefined) {
        this.$message.warning("请选择操作的数据");
      } else {
        putapi(
          `/api/app/customerorggroup/updatemanysort?id=${this.form.id}&SortType=1`
        ).then((res) => {
          this.$message.success("操作成功");
          this.getlist();
        });
      }
    },
    //删除
    deletegroup() {
      if (this.form.id == undefined) {
        this.$message.warning("请选择需要操作的数据");
      } else {
        deletapi(`/api/app/customer-org-group/${this.form.id}`).then((res) => {
          this.$message.success("删除成功");
        });
      }
    },
    //点击当前列
    clickoncolumn(row) {
      console.log(row.id);
      this.personnelUnit.customerOrgGroupId = row.id;
      getapi(`/api/app/customer-org-group/${row.id}`).then((res) => {
        this.form = res.data;
        this.personnelUnit.form = res.data;
      });
      // //
      console.log(this.personnelUnit.form.id);
      // getapi(
      //   `/api/app/customer-org-group-detail/customer-org-group-detail-in-asbitem/${this.personnelUnit.form.id}`
      // ).then((res) => {
      //   console.log(res.data, "当前列");
      //   this.personnelUnit.nogroupselected = res.data;
      //   console.log(this.personnelUnit.nogroupselected, "我是分组");
      // });
    },
    //编辑弹框
    editgroup() {
      this.title = 2;
      this.obtainsuperior();
      this.dialogVisible = true;
    },
    //获取性别和婚姻状况
    obtainsuperior() {
      //获取性别
      getapi("/api/app/sex").then((res) => {
        this.forSexId = res.data;
      });
      //获取婚姻状况
      getapi("/api/app/marital-statuses").then((res) => {
        this.maritalStatusId = res.data.items;
        console.log(res);
      });
    },
    Onsubmint() {
      if (this.title == 1) {
        let obj = {
          displayName: this.form.displayName,
          price: Number(this.form.price),
          forSexId: this.form.forSexId,
          maritalStatusId: this.form.maritalStatusId,
          ageLowerLimit: Number(this.form.ageLowerLimit),
          ageUpperLimit: Number(this.form.ageUpperLimit),
          jobPost: this.form.jobPost,
          jobTitle: this.form.jobTitle,
          remark: this.form.remark,
        };
        postapi(
          `/api/app/customer-org-group/in-customer-org-id/${this.personnelUnit.id}`,
          obj
        ).then((res) => {
          this.$message.success("新增成功");
          this.dialogVisible = false;
        });
      } else if (this.title == 2) {
        let obj = {
          displayName: this.form.displayName,
          price: Number(this.form.price),
          forSexId: this.form.forSexId,
          maritalStatusId: this.form.maritalStatusId,
          ageLowerLimit: Number(this.form.ageLowerLimit),
          ageUpperLimit: Number(this.form.ageUpperLimit),
          jobPost: this.form.jobPost,
          jobTitle: this.form.jobTitle,
          remark: this.form.remark,
        };
        putapi(`/api/app/customer-org-group/${this.form.id}`, obj).then(
          (res) => {
            this.$message.success("修改成功");
            this.dialogVisible = false;
          }
        );
      }
    },
    //新增弹框
    groupaddtion() {
      if (this.personnelUnit.id == "") {
        this.$message.warning("请选择单位");
      } else {
        this.dialogVisible = true;
        this.title = 1;
        this.form = {};
        this.obtainsuperior();
      }
    },
  },
};
</script>
<style scoped>
::v-deep .el-form-item {
  margin-bottom: 10px;
}
</style>