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">
            <template slot-scope="scope">
              <el-input
                disabled
                type="text"
                v-model="personnelUnit.nogroupselected[scope.$index].price"
              />
            </template>
          </el-table-column>
          <el-table-column label="折扣" prop="price">
            <template slot-scope="scope">
              <el-input
                @change="discount(scope.$index)"
                type="text"
                v-model="personnelUnit.nogroupselected[scope.$index].discount"
              />
            </template>
          </el-table-column>
          <el-table-column label="价格" prop="price">
            <template slot-scope="scope">
              <el-input
                @input="changingprices(scope.row.price)"
                type="text"
                v-model="personnelUnit.nogroupselected[scope.$index].price"
              />
            </template>
          </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
      price: "", //价格
      title: 1,
    };
  },
  computed: {
    ...mapState(["personnelUnit"]),
  },
  created() {
    this.getitemtype();
    this.getportfolioitems();
  },
  methods: {
    changingprices(price) {
      this.price = price;
    },
    discount(index) {
      console.log(index); //100标准价格
      this.personnelUnit.nogroupselected[index].price = Math.round(
        (100 * Number(this.personnelUnit.nogroupselected[index].queueTime)) /
          100,
        2
      );
    },
    inputchang(row, newVal) {
      this.price = row.price;
      console.log(this.price);
    },
    //保存按钮
    Onsubmit() {
      if (!this.personnelUnit.customerOrgGroupId) {
        alert("请先选择单位分组");
        return;
      } else {
        console.log(this.personnelUnit.nogroupselected);
        postapi("/api/app/customer-org-group-detail/many", this.addrulst).then(
          (res) => {
            this.$message.success("操作成功");
            console.log(this.addrulst);
          }
        );
      }
      // if (this.title == 2) {
      //   if (!this.personnelUnit.customerOrgGroupId) {
      //     alert("请先选择单位分组");
      //     return;
      //   } else {
      //     console.log(this.personnelUnit.nogroupselected);
      //     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() {
      console.log(this.personnelUnit.id);
      if (this.personnelUnit.form.id == "") {
        alert("请先选择单位类别");
      } else {
        // 让按钮恢复禁用
        this.saveornot = false;
        //personnelUnit.nogroupselected
        if (this.rightselctedata.length == 0) {
          this.$message.warning("已选数据为空无法移动");
        } else {
          // this.title = 2;
          let count = this.rightselctedata.length - 1;
          for (var i = count; i >= 0; i--) {
            [...new Set(this.rightselctedata)];
            this.tabledata.push(this.rightselctedata[i]);
            this.personnelUnit.nogroupselected.splice(i, 1);
          }
          console.log(this.personnelUnit.customerOrgGroupId);

          // this.
          this.rightselctedata.forEach((item) => {
            this.addrulst.push({
              asbitemId: item.id,
              price: item.price,
              // price: this.price,
              customerOrgGroupId: this.personnelUnit.customerOrgGroupId,
            });
          });
        }
      }
    },
    //右侧勾选按钮
    selecteditems(val) {
      this.rightselctedata = val;
      // this.personnelUnit.nogroupselected = val;
      console.log(this.rightselctedata);
    },
    // 添加按钮
    removedata() {
      if (this.personnelUnit.form.id == "") {
        alert("请先选择单位分组");
      } else {
        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);
            if ([...new Set(this.unselecteddata)]) {
              // this.unselecteddata.push(this.unselecteddata[i]);
              this.personnelUnit.nogroupselected.push(this.unselecteddata[i]);
              this.tabledata.splice(this.tabledata[i], 1);
            }
            // this.personnelUnit.nogroupselected.push(this.unselecteddata[i]);
          }
          console.log(this.personnelUnit.customerOrgGroupId);
          this.unselecteddata.forEach((item) => {
            // var price = "";
            // if (this.price == "") {
            //   price = item.price;
            // } else {
            //   price = this.price;
            // }
            //获取最新价格
          });
          //  let prices = "";
          this.personnelUnit.nogroupselected.forEach((items) => {
            // prices = items.price;

            // this.price = item.price;
            // console.log(items, "items");
            this.addrulst.push({
              asbitemId: items.id, // "3a0b2f0c-f884-bec4-a350-79b46b455a2d"
              price: items.price,
              // price: this.price == "" ? items.price : this.price,
              customerOrgGroupId: this.personnelUnit.customerOrgGroupId,
            });
          });
          console.log(this.addrulst, "hhhhhhh");
        }
      }
    },
    // 左侧未选
    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(customerOrgGroupId) {
      getapi(`/api/app/customer-org-group/${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}`
      ).then((res) => {
        console.log(
          `/api/app/customer-org-group-detail/customer-org-group-detail-in-asbitem/${customerOrgGroupId}`,
          res
        );
        this.personnelUnit.nogroupselected = res.data;
      });
    },
    // getapi(`/api/app/customer-org-group/${row.id}`).then((res)
  },
  //监听事件
  watch: {
    //
    "personnelUnit.customerOrgGroupId"(newVal, oldVal) {
      console.log(
        "watch patientRegister.addTimes newVal：",
        newVal,
        " oldVal：",
        oldVal
      );
      if (newVal != oldVal) {
        this.listeninglist(newVal);
        //
      }
    },
  },
};
</script>
<style scoped>
.operatebottom {
  margin-left: 5%;
}
.mainarearightbox {
  width: 35%;
  border: 1px solid #000;
  height: 300px;
  margin-left: 7%;
  overflow: auto;
}
.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;
  overflow: hidden;
  overflow: auto;

  margin-left: 7%;
}
.examinationcategory {
  margin-top: 30px;
}
</style>