ConsumSupplier-Platform/src/views/page/mainrTenance-sup/templateDetail/indexDetail.vue

<template>
  <!-- 手术包模板 -->
  <div>
    <div class="right-button">
      <el-button type="primary" @click="handleAddmcs">添加耗材</el-button>
    </div>
    <div class="common-card">
      <h3>基本信息</h3>
      <el-form
        :model="listForm"
        ref="listform"
        label-width="237px"
        class="grid-form-class"
      >
        <div class="form-body">
          <div class="flex-css">
            <el-form-item label="适用科室" prop="dept" :rules="rules.selectRequired">
              <div class="content" v-if="isShow">
                {{ listForm.dept }}
              </div>
              <el-select v-else v-model="listForm.dept" placeholder="请选择适用科室" clearable>
                <el-option
                  v-for="item in deptOptions"
                  :key="item.id"
                  :label="item.deptName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="模板名称" prop="tmplName" :rules="rules.required">
              <div class="content" v-if="isShow">
                {{ listForm.tmplName }}
              </div>
              <el-input
                v-else
                v-model="listForm.tmplName"
                placeholder="请输入模板名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="适用手术" prop="oprn" :rules="rules.selectRequired">
              <div class="content" v-if="isShow">
                {{ listForm.oprn }}
              </div>
              <el-select v-else v-model="listForm.oprn" placeholder="请选择适用手术" clearable>
                <el-option
                  v-for="item in oprnOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <!-- <div class="flex-css">
            <el-form-item label="供应商" prop="lstUpdUsrName">
              <div class="content">
                {{ listForm.lstUpdUsrName }}
              </div>
            </el-form-item>
          </div> -->
        </div>
      </el-form>
    </div>
    <div class="common-card">
      <h3>模板明细</h3>
      <el-form :model="list" ref="tabledata">
        <el-table
          v-loading="listLoading"
          element-loading-text="加载中"
          :data="list"
          fit
          stripe
          border
        >
          <template slot="empty">
            <img src="@/assets/nopage.png" alt />
            <p>暂无数据</p>
          </template>
          <!-- <el-table-column type="selection" width="60" /> -->
          <el-table-column fixed type="index" label="序号" width="60" />
          <el-table-column label="耗材编码" prop="materialId" />
          <el-table-column label="医保编码" prop="hiCode" />
          <el-table-column label="耗材信息" prop="prodName" width="300">
            <template slot-scope="scope">
              <mcs-info :info="scope.row"></mcs-info>
            </template>
          </el-table-column>
          <el-table-column label="规格" prop="spec" />
          <el-table-column label="型号" prop="mol" />
          <el-table-column label="材质" prop="matl" />
          <el-table-column label="是否集采" prop="isFas">
            <template #default="{ row }">
              <span v-if="row.isFas == '0'">否</span>
              <span v-if="row.isFas == '1'">是</span>
            </template>
          </el-table-column>
          <el-table-column label="数量" prop="cnt" width="150">
            <template slot-scope="scope">
              <el-form-item
                label-width="0"
                class="item"
                :prop="scope.$index + '.cnt'"
                :rules="[
                  {
                    required: true,
                    pattern: /^[0-9]\d*$/,
                    message: '请输入正整数',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input placeholder="请输入" v-model="scope.row.cnt"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="包装单位" prop="convrat">
            <template #default="{ row }">
              <span
                >{{ row.purcUnt }} ({{ row.convrat }}{{ row.prcUnt }}/{{
                  row.purcUnt
                }})</span
              >
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" style="color: red" @click="handleDel(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </div>
    <div class="foot-button">
      <el-button type="primary" @click="handleBc">保 存</el-button>
      <el-button type="primary" @click="handleBack">返 回</el-button>
    </div>
    <!-- 添加耗材 mcsDialog-->
    <el-dialog title="添加耗材" :visible.sync="mcsDialog" width="70%">
      <el-form
        class="dialogForm"
        :model="listQuery"
        ref="queryForm"
        :inline="true"
        label-width="100px"
      >
        <el-form-item label="耗材信息" prop="prodName">
          <el-input v-model="listQuery.prodName" placeholder="请输入耗材名称/医保编码"></el-input>
        </el-form-item>
        <el-form-item label="规格" prop="spec">
          <el-input v-model="listQuery.spec" placeholder="请输入规格"></el-input>
        </el-form-item>
        <el-form-item label="型号" prop="mol">
          <el-input v-model="listQuery.mol" placeholder="请输入型号"></el-input>
        </el-form-item>
        <el-form-item label="生产企业" prop="prodEntp">
          <el-input v-model="listQuery.prodEntp" placeholder="请输入生产企业"></el-input>
        </el-form-item>
        <!-- <el-form-item label="供应商" prop="isFas">
        </el-form-item> -->
        <el-form-item label="是否集采" prop="isFas">
          <el-select v-model="listQuery.isFas" placeholder="请选择是否集采" clearable>
            <el-option
              v-for="item in isFasOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="耗材类别" prop="mcsType">
          <el-select v-model="listQuery.mcsType" placeholder="请选择耗材类别" clearable>
            <el-option
              v-for="item in mcsTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="生产来源" prop="prodSouc">
          <el-select v-model="listQuery.prodSouc" placeholder="请选择生产来源" clearable>
            <el-option
              v-for="item in prodSoucOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="材质" prop="matl">
          <el-input v-model="listQuery.matl" placeholder="请输入材质"></el-input>
        </el-form-item>
        <el-form-item label="注册证号" prop="regcertno">
          <el-input v-model="listQuery.regcertno" placeholder="请输入注册证号"></el-input>
        </el-form-item>
        <!-- <el-form-item> -->
          <div class="right-button">
          <el-button type="primary" @click="getdiaMcs('search')">查询</el-button>
          <el-button @click="reset">重置</el-button>
        <!-- </el-form-item> -->
        </div>
      </el-form>
      <el-table
        element-loading-text="加载中"
        :data="mcsData"
        fit
        stripe
        border
        height="400px"
        @selection-change="handleSelectionChange"
        row-key="hiCode"
        v-loading="dialogLoading"
        ref="multipleTable"
      >
        <template slot="empty">
          <img src="@/assets/nopage.png" alt />
          <p>暂无数据</p>
        </template>
        <el-table-column
          type="selection"
          width="60"
          :reserve-selection="true"
          :selectable="selected"
        />
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column label="耗材编码" prop="materialId" />
        <el-table-column label="医保编码" prop="hiCode" />
        <el-table-column label="耗材信息" prop="prodName" width="300">
          <template slot-scope="scope">
            <mcs-info :info="scope.row"></mcs-info>
          </template>
        </el-table-column>
        <el-table-column label="规格" prop="spec" />
        <el-table-column label="型号" prop="mol" />
        <el-table-column label="材质" prop="matl" />
        <el-table-column label="是否集采" prop="isFas">
          <template #default="{ row }">
            <span v-if="row.isFas == '0'">否</span>
            <span v-if="row.isFas == '1'">是</span>
          </template>
        </el-table-column>
        <el-table-column label="供应商" prop="retnCnt" />
        <el-table-column label="申领包装" prop="convrat">
          <template #default="{ row }">
            <span
              >{{ row.purcUnt }} ({{ row.convrat }}{{ row.prcUnt }}/{{
                row.purcUnt
              }})</span
            >
          </template>
        </el-table-column>
        <el-table-column label="单价" prop="purcPric">
          <template #default="{ row }">
            <span>{{ row.purcPric }}元/{{ row.prcUnt }}</span>
          </template>
        </el-table-column>
      </el-table>
      <yl-pagination
        v-show="totalD > 0"
        :total="totalD"
        :page.sync="listQuery.current"
        :limit.sync="listQuery.size"
        @pagination="getdiaMcs"
      />
      <div class="foot-button" style="margin-top: 30px">
        <el-button type="primary" @click="clickMcs">确 认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ylStep from "@/components/yl-step";
import ylPagination from "@/components/yl-pagination";
import mcsInfo from "@/views/components/mcs-info.vue";
import rules from "@/utils/rules";
import { selectSplerMcsList } from "@/api/consumCataManage-sup/index";
import {saveBoneTemplate,selectDeptList} from "@/api/mainrTenance-sup/index"
export default {
  components: {
    ylStep,
    ylPagination,
    mcsInfo,
  },
  data() {
    return {
      rules,
      listForm: {
        lstUpdUsrName: "",
        tmplName: "",
        oprn: "",
        dept: "",
      },
      listLoading: false,
      list: [],
      isShow: false,
      mcsDialog: false,
      listQuery: {
        prodName: "",
        spec: "",
        mol: "",
        prodEntp: "",
        isFas: "",
        mcsType: "",
        prodSouc: "",
        matl: "",
        regcertno: "",
        spdId: this.$route.query.spdId,
        current: 1,
        size: 10,
      },
      mcsData: [],
      dialogLoading: false,
      totalD: 0,
      dialogSelect: [],
      oprnOptions:[
        {value:"1",label:"111"},
        {value:"2",label:"222"},
      ],
      deptOptions:[
      ],
      isFasOptions: [
        { value: "1", label: "是" },
        { value: "0", label: "否" },
      ],
      mcsTypeOptions: [
        { value: "0", label: "普通耗材" },
        { value: "1", label: "高值耗材" },
        { value: "2", label: "试剂" },
      ],
      prodSoucOptions: [
        { value: "1", label: "国产" },
        { value: "2", label: "进口" },
      ],
    };
  },
  created() {},
  mounted() {
    selectDeptList({deptName:""}).then((res)=>{
      this.deptOptions = res.data
    })
  },
  methods: {
    handleBc() {
      if (this.list.length == 0) {
        this.$message({
                type: "warning",
                message: "请选择模板明细",
              });
      } else {
        this.$refs.listform.validate((valid) => {
        if (valid) {
          this.$refs.tabledata.validate((valid) => {
            if (valid) {
              this.$confirm("确认提交", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
              }).then(() => {
                let listquery = [];
               this.list.forEach((v)=>{
                listquery.push({
                  cnt:v.cnt,
                  hiCode:v.hiCode
                })
                })
                let bath = {
                  tmplName: this.listForm.tmplName,
                  oprn: this.listForm.oprn,
                  dept: this.listForm.dept,
                  spdId: this.$route.query.spdId,
                  detlList: listquery,
                };
                console.log(bath, "bath");
                saveBoneTemplate(bath)
                  .then((res) => {
                    this.$message.success("保存成功");
                    this.$router.push({
                      name: "Surgicalbag",
                      query:{
                        spdId:this.$route.query.spdId
                      }
                    });
                  })
                  .catch((err) => {
                    this.$message.error("保存失败");
                  });
              });
            } else {
              this.$message({
                type: "warning",
                message: "请填写必填项信息",
              });
            }
          });
        }
      });
      }
    },
    handleBack() {
      this.$router.push({
        name: "Surgicalbag",
        query: { spdId: this.$route.query.spdId },
      });
    },
    // 添加耗材弹框
    handleAddmcs() {
      this.mcsDialog = true;
      this.dialogLoading = true;
      this.listQuery.current = "1";
      this.getdiaMcs()
      this.$refs.multipleTable.clearSelection()

    },
    getdiaMcs() {
      this.dialogLoading = true;
      selectSplerMcsList(this.listQuery)
        .then((res) => {
          this.mcsData = res.data.records;
          this.totalD = res.data.total;
          this.dialogLoading = false;
        })
        .catch((err) => {
          this.dialogLoading = false;
        });
    },
    reset() {
      this.$refs.queryForm.resetFields();
      this.getdiaMcs();
    },
    // 选择耗材
    handleSelectionChange(row) {
      this.dialogSelect = row;
    },
    //确认
    clickMcs() {
      this.mcsDialog = false;
      this.list = this.list.concat(this.dialogSelect);
      this.$refs.multipleTable.clearSelection()
    },
    // 删除
    handleDel(row, indexed) {
      this.list = this.list.filter((item) => item.hiCode !== row.hiCode);
    },
    // 禁选
    selected(row, index) {
      if (
        this.list.some((el) => {
          return el.hiCode === row.hiCode;
        })
      ) {
        return false;
      } else {
        return true;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.dialogForm ::v-deep .el-input__inner {
  width: 200px;
}
</style>