Vue_New/src/xt_pages/outpatientCharges/components/monthPrescriptionTable.vue

<template>
  <div class="prescriptionTable">
    <el-table v-if="activeType  == 1" :data="prescription.advices" border style="width: 99%;" :row-style="{ color: '#303133' }"
              :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}" highlight-current-row>
      <el-table-column align="center" type="index" width="40" label="序号"></el-table-column>
      <el-table-column align="center" prop="drug_name" label="名称">
        <template slot-scope="scope"><span :title="scope.row.drug_name">{{ scope.row.drug_name }}</span></template>
      </el-table-column>
      <el-table-column align="center" prop="single_dose" width="90" label="单次用量">
        <template slot-scope="scope">
          <div style="display:flex;align-items:center;">
            <el-input v-model="scope.row.single_dose" style="width:65%;"></el-input>
            <div>{{scope.row.single_dose_unit}}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="delivery_way" width="100" label="用法">
        <template slot-scope="scope">
          <el-select v-model="scope.row.delivery_way" placeholder="请选择">
            <el-option
              readonly
              v-for="(item,index) in drugways"
              :key="index"
              :label="item.name"
              :value="item.name">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="execution_frequency" width="100" label="频率">
        <template slot-scope="scope">
          <el-select v-model="scope.row.execution_frequency" placehold er="请选择">
            <el-option
              readonly
              v-for="item,index in efs"
              :key="index"
              :label="item.name"
              :value="item.name">
            </el-option>
          </el-select>
        </template>
      </el-table-column>


      <el-table-column align="center" prop="day" width="50" label="天数">
        <template slot-scope="scope">
          <div style="display:flex;align-items:center;">
            <el-input v-model="scope.row.day" placeholder="" readonly></el-input>
            <span>{{'天'}}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="prescribing_number" width="80" label="总量">
        <template slot-scope="scope">
          <div style="display:flex;align-items:center;">
            <el-input v-model="scope.row.prescribing_number" style="width:60%" placeholder="" readonly></el-input>{{scope.row.prescribing_number_unit}}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="retail_price" width="70" label="单价">
        <template slot-scope="scope">
          <div style="display:flex;align-items:center;">
          <el-input v-model="scope.row.retail_price" placeholder="" readonly></el-input>{{'元'}}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="remark" width="50" label="备注">
        <template slot-scope="scope">
          <el-input v-model="scope.row.remark" :title="scope.row.remark" placeholder="" readonly></el-input>
        </template>
      </el-table-column>
    </el-table>

    <el-table v-if="activeType == 2" :data="prescription.project" border style="width: 99%;" :row-style="{ color: '#303133' }"
              :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}" highlight-current-row>
      <el-table-column align="center" type="index" width="40" label="序号"></el-table-column>
      <el-table-column align="center" prop="project_name" label="名称">
        <template slot-scope="scope"><span :title="scope.row.project_name">{{ scope.row.project_name }}</span></template>
      </el-table-column>
      <el-table-column align="center" prop="statistical_classification" width="100" label="组">
        <template slot-scope="scope">{{getGroup(scope.row.statistical_classification)}}</template>
      </el-table-column>
      <el-table-column align="center" prop="single_dose" width="80" label="单次用量">
        <template slot-scope="scope">
          <el-input v-model="scope.row.single_dose" placeholder="" readonly></el-input>
          <div>{{scope.row.unit}}</div>

        </template>
      </el-table-column>
      <el-table-column align="center" prop="delivery_way" width="80" label="用法">
        <template slot-scope="scope">
          <el-autocomplete
            readonly
            style="width:100%;"
            class="inline-input"
            v-model="scope.row.delivery_way"
            :fetch-suggestions="querySearch2"
            placeholder="请输入内容"
          ></el-autocomplete>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="execution_frequency" width="80" label="频率">
        <template slot-scope="scope">
          <el-input v-model="scope.row.execution_frequency" placeholder="" readonly></el-input>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="number_days" width="50" label="天数">
        <template slot-scope="scope">
          <div style="display:flex;align-items:center;">
            <el-input v-model="scope.row.number_days" placeholder="" readonly></el-input>
            <div>{{'天'}}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="total" width="70" label="总量">
        <template slot-scope="scope">
          <div style="display:flex;align-items:center;">
            <el-input v-model="scope.row.total" style="width:60%" placeholder="" readonly></el-input>
            <div>{{scope.row.unit}}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="name" width="70" label="单价">
        <template slot-scope="scope">
          <div style="display:flex;align-items:center;">
            <el-input v-model="scope.row.price" placeholder="" readonly></el-input>
            <div>{{'元'}}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="name" width="50" label="备注">
        <template slot-scope="scope">
          <el-input v-model="scope.row.remark" :title="scope.row.remark" readonly></el-input>
        </template>
      </el-table-column>
    </el-table>
    <div class="additionalBox">
      <div class="additionalOne" v-for="(item,index) in prescription.addition" :key="index">
        <span :title="item.item_name">{{item.item_name}}</span>
        <el-input v-model="item.price" placeholder="" style="width:50px;"></el-input>
        共
        <el-input v-model="item.count" placeholder="" style="width:50px;"></el-input>
        次
        <i class="el-icon-delete deleteIcon" @click="delAddition(index,item)"></i>
      </div>
    </div>
  </div>
</template>

<script>
  import { getDictionaryDataConfig} from "@/utils/data";
  import { getInitData,delHisAdvice,delHisProject,delHisAddition } from '@/api/his/his'

  export default {
    props: {
      preDrugs: Array,
      activeType: Number,
      addtions_charge:Array,
      prescription:{
        type:Object,
        default: function () {
          return {
            name:"",
            advices:[],
            project:[],
            drugways:[],
            efs:[],
          };
        }
      },
    },
    data() {
      return {
        advices:[],
        tableData: [],
        newoptions: [{
          value: '1',
          label: '1'
        }, {
          value: '2',
          label: '2'
        }, {
          value: '3',
          label: '3'
        }, {
          value: '4',
          label: '4'
        }, {
          value: '5',
          label: '5'
        }],
        value: '1',
        input: 1,
      }
    },
    methods:{
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
        }
      },
      querySearch2(queryString, cb) {
        var restaurants = this.getDictionaryDataConfig("system","project_use")
        restaurants.map(item => {
          item.value = item.name
        })
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
        // 调用 callback 返回建议列表的数据
        cb(results)
      },
      getInitData(){
        getInitData().then(response => {
          if (response.data.state == 0) {
            this.$message.error(response.data.msg)
            return false
          } else {
            this.drugways = response.data.data.drugways
            this.efs = response.data.data.efs
          }
        })
      },
      deepClone(source) {
        if (!source && typeof source !== 'object') {
          throw new Error('error arguments', 'shallowClone')
        }
        const targetObj = source.constructor === Array ? [] : {}
        Object.keys(source).forEach((keys) => {
          if (source[keys] && typeof source[keys] === 'object') {
            targetObj[keys] = this.deepClone(source[keys])
          } else {
            targetObj[keys] = source[keys]
          }
        })
        return targetObj
      },
      setNewData:function(data){
        this.prescription = data
      },
      getDictionaryDataConfig(module, filed_name) {
        return getDictionaryDataConfig(module, filed_name)
      },
      getGroup(id){
        var name = ""
        var statistics_category =  getDictionaryDataConfig('system','statistics_category')
        for(let i=0;i<statistics_category.length;i++){
          if(id == statistics_category[i].id){
            name = statistics_category[i].name
          }
        }
        return name
      },
    },mounted(){
      this.getInitData()
    },
  }
</script>

<style lang="scss">
  .prescriptionTable {

  .el-input__inner {
    padding: 0 5px;
  }

  .additionalBox {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;

  .additionalOne {
    margin-right: 20px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;

  > span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 80px;
    display: inline-block;
    font-size: 14px;
  }

  .deleteIcon {
    color: red;
    margin-left: 5px;
  }

  }
  .el-table th .cell, .el-table td .cell {
    padding: 0 2px;
    white-space: pre-line;
  }

  .el-icon-delete {
    color: red;
  }

  }
  }
</style>