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="prodName" width="300">
            <template slot-scope="scope">
              <mcs-info :info="scope.row"></mcs-info>
            </template>
          </el-table-column>
          <el-table-column label="医保编码" prop="hiCode" />
          <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="info" @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 fixed type="index" label="序号" width="60" />
        <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="hiCode" />
        <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="crteUsrName" />
        <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: "头部手术", label: "头部手术" },
        { value: "颈部手术", label: "颈部手术" },
        { value: "骨科手术", label: "骨科手术" }
      ],
      deptOptions: [],
      isFasOptions: [{ value: "1", label: "是" }, { value: "0", label: "否" }],
      mcsTypeOptions: [
        { value: "0", label: "普通耗材" },
        { value: "1", label: "高值耗材" },
        { value: "2", label: "试剂" },
        { value: "3", 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
                  };
                  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>