peisweb/src/components/unitGrouping/unitGroupCategory.vue

<template>
  <div class="examinationcategory">
    <div>
      <span>项目类别</span>
      <el-select
        v-model="value"
        placeholder="请选择"
        style="margin-left: 20px"
        @change="getprojectgroups"
        clearable
      >
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.displayName"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </div>
    <div class="mainarea">
      <div class="mainarealeftbox">
        <el-table
          :header-cell-style="{ background: '#eef1f6' }"
          :data="tabledata"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection"></el-table-column>
          <el-table-column
            label="未选组合项目"
            prop="displayName"
          ></el-table-column>
        </el-table>
      </div>
      <div class="mainbutton">
        <div>
          <el-button
            type="primary"
            style="margin-top: 10px"
            @click="addselecteditems"
            >移除 <i class="el-icon-arrow-left"></i
          ></el-button>
        </div>
        <div>
          <el-button type="primary" style="margin-top: 10px" @click="removedata"
            >添加 <i class="el-icon-arrow-right"></i
          ></el-button>
        </div>
        <div>
          <el-button
            style="margin-top: 10px"
            :disabled="saveornot"
            @click="Onsubmit"
            >保存
          </el-button>
        </div>
      </div>
      <!--  -->
      <div class="mainarearightbox">
        <el-table
          :header-cell-style="{ background: '#eef1f6' }"
          :data="personnelUnit.nogroupselected"
          @selection-change="selecteditems"
        >
          <!-- temporaryselection   personnelUnit.nogroupselected-->
          <el-table-column type="selection"></el-table-column>
          <el-table-column
            label="已选组合项目"
            width="110"
            prop="displayName"
          ></el-table-column>

          <el-table-column label="价格" prop="price"></el-table-column>
        </el-table>
      </div>
      <div class="operatebottom">
        <div>
          <el-button type="primary" @click="packagerepicion"
            >复制套餐</el-button
          >
        </div>
        <div style="margin-top: 10px">
          <el-button type="primary" @click="copygroup">复制分组</el-button>
        </div>
      </div>
    </div>
    <!-- 复制套餐弹框 -->
    <el-dialog title="编辑" :visible.sync="dialogVisible" width="60%">
      <el-table :data="packagelist">
        <el-table-column label="编号" prop="id"></el-table-column>
        <el-table-column label="名称" prop="displayName"></el-table-column>
        <el-table-column label="创建者" prop="creatorName"></el-table-column>
        <el-table-column label="创建时间" prop="creatorName">
          <template slot-scope="scope">
            {{ scope.row.creationTime | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column
          label="修改者"
          prop="lastModifierName"
        ></el-table-column>
        <el-table-column label="修改时间" prop="lastModificationTime">
          <template slot-scope="scope">
            {{ scope.row.lastModificationTime | dateFormat }}
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 复制分组 弹框-->
    <el-dialog
      title="复制分组"
      :visible.sync="copyGroupdialogVisible"
      width="50%"
    >
      <el-table>
        <el-table-column label="编号"></el-table-column>
        <el-table-column label="创建者"></el-table-column>
        <el-table-column label="创建时间"></el-table-column>
        <el-table-column label="修改者"></el-table-column>
        <el-table-column label="修改时间"></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="copyGroupdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="copyGroupdialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!--  -->
  </div>
</template>
<script>

import { getapi, postapi } from "@/api/api";
import { mapState } from "vuex";
export default {
  data() {
    return {
      saveornot: true, //保存按钮
      selecteddata: [], //已选数据
      unselecteddata: [], //未选数据
      unselecteddata: [], //右边勾选中
      rightselctedata: [], //右侧已选
      options: [],
      value: "",
      dialogVisible: false,
      copyGroupdialogVisible: false,
      packagelist: [],
      tabledata: [],
      temporaryselection: [], //已选组合项目table
      copegroupdata: [], //复制分组
      addrulst: [], //添加保存的Id
    };
  },
  computed: {
    ...mapState(["personnelUnit"]),
  },
  created() {
    this.getitemtype();
    this.getportfolioitems();
  },
  methods: {
    //保存按钮
    Onsubmit() {
      if (!this.personnelUnit.customerOrgGroupId) {
        alert("请先选择单位分组");
        return;
      } else {
        postapi("/api/app/customer-org-group-detail/many", this.addrulst).then(
          (res) => {
            this.$message.success("操作成功");
            console.log(this.addrulst);
          }
        );
      }

      // console.log(this.addrulst);
      // // console.log(this.personnelUnit.form.id);
      // if (this.addrulst[customerOrgGroupId] == undefined) {
      //   this.$message.warning("请先选择单位分组");
      // } else {
      //   postapi("/api/app/customer-org-group-detail/many", this.addrulst).then(
      //     (res) => {
      //       console.log(this.personnelUnit.form.id);
      //       this.$message.success("操作成功");
      //     }
      //   );
      // }
    },
    //移除按钮
    addselecteditems() {
      //personnelUnit.nogroupselected
      if (this.rightselctedata.length == 0) {
        this.$message.warning("已选数据为空无法移动");
      } else {
        let count = this.rightselctedata.length - 1;
        for (var i = count; i >= 0; i--) {
          // this.personnelUnit.nogroupselected.splice(i, 1);
          if (
            // !this.rightselctedata.includes(this.rightselctedata[i].displayName)
            [...new Set(this.rightselctedata)]
          ) {
            this.tabledata.push(this.rightselctedata[i]);
            this.personnelUnit.nogroupselected.splice(i, 1);
          
          }
          // this.tabledata.push(this.rightselctedata[i]);
        }
        // this.
        this.rightselctedata.forEach((item) => {
          this.addrulst.push({
            asbitemId: item.id,
            price: item.price,
            customerOrgGroupId: this.personnelUnit.customerOrgGroupId,
          });
        });
      }
    },
    //右侧勾选按钮
    selecteditems(val) {
      this.rightselctedata = val;
      // this.personnelUnit.nogroupselected = val;
      console.log(this.rightselctedata);
    },
    // 添加按钮
    removedata() {
      if (this.unselecteddata.length == 0) {
        this.$message.warning("未选数据为空无法移动");
      } else {
        this.saveornot = false;
        let count = this.unselecteddata.length - 1;
        for (var i = count; i >= 0; i--) {
          // this.tabledata.splice(i, 1);
          // this.personnelUnit.nogroupselected.push(this.unselecteddata[i]);
          if ([...new Set(this.unselecteddata)]) {
            this.tabledata.splice(i, 1);
            this.personnelUnit.nogroupselected.push(this.unselecteddata[i]);
          }
        }

        this.unselecteddata.forEach((item) => {
          this.addrulst.push({
            asbitemId: item.id,
            price: item.price,
            customerOrgGroupId: this.personnelUnit.customerOrgGroupId,
          });
        });
        console.log(this.addrulst, "hhhhhhh");
        // this.selecteddata = this.unselecteddata;
        // 复制
        //  let count = this.unselecteddata.length - 1;
        // for (var i = count; i >= 0; i--) {
        //   this.tabledata.splice(i, 1);
        //   this.selecteddata.push(this.unselecteddata[i]);
        // }
      }
    },
    // 左侧未选
    handleSelectionChange(val) {
      // this.selecteddata = val;
      this.unselecteddata = val;
      console.log(this.unselecteddata);
    },
    //获取所有组合项目
    getportfolioitems() {
      getapi("/api/app/asbitem/in-filter?Filter").then((res) => {
        this.tabledata = res.data.items;
      });
    },
    //项目类别选择
    getprojectgroups(v) {
      if (v !== "") {
        getapi(`/api/app/asbitem/in-item-type/${v}`).then((res) => {
          console.log(res);
          this.tabledata = res.data;
        });
      } else {
        getapi("/api/app/asbitem/in-filter?Filter").then((res) => {
          this.tabledata = res.data.items;
        });
      }
    },
    //复制分组弹框
    copygroup() {
      if (this.personnelUnit.form == "") {
        this.$message.warning("请选择分组");
      } else {
        this.copyGroupdialogVisible = true;
        getapi(
          `/api/app/customer-org-group-detail/customer-org-group-detail-in-asbitem?CustomerOrgGroupId=${this.personnelUnit.form.id}`
        ).then((res) => {
          console.log(res);
          this.personnelUnit.form = res.data;
        });
      }
    },
    //复制套餐
    packagerepicion() {
      this.dialogVisible = true;
      getapi("/api/app/medical-package").then((res) => {
        this.packagelist = res.data.items;
        console.log(res);
      });
    },
    //
    getitemtype() {
      getapi("/api/app/item-type/by-code-all").then((res) => {
        this.options = res.data;
      });
    },

    //获取当前列列表数据
    listeninglist() {
      getapi(
        `/api/app/customer-org-group/${this.personnelUnit.customerOrgGroupId}`
      ).then((res) => {
        this.personnelUnit.form = res.data;
        console.log(res);
      });
      getapi(
        `/api/app/customer-org-group-detail/customer-org-group-detail-in-asbitem?CustomerOrgGroupId=${this.personnelUnit.form.id}`
      ).then((res) => {
        console.log(res);
        this.personnelUnit.nogroupselected = res.data;
      });
    },
    // getapi(`/api/app/customer-org-group/${row.id}`).then((res)
  },
  //监听事件
  watch: {
    //
    "personnelUnit.customerOrgGroupId"(newVal, oldVal) {
      //console.log('patientRegister.addTimes newVal：',newVal,' oldVal：',oldVal)
      if (newVal != oldVal) {
        console.log("newVal", newVal);
        this.listeninglist();
        //
      }
    },
  },
};
</script>
<style scoped>
.operatebottom {
  margin-left: 5%;
}
.mainarearightbox {
  width: 30%;
  border: 1px solid #000;
  height: 300px;
  margin-left: 7%;
}
.mainbutton {
  margin-left: 5%;
  padding: 5px 10px;
  margin-top: 5%;
}
.mainarea {
  display: flex;
  margin-top: 20px;
}
.mainarealeftbox {
  width: 20%;
  border: 1px solid #000;
  height: 300px;
  margin-left: 7%;
}
.examinationcategory {
  margin-top: 30px;
}
</style>