elizebeth/src/xt_pages/data/components/addInspection.vue

<template>
    <el-dialog
            :title="formTitle"
            width="900px"
            :visible.sync="visible"
            :before-close="_close"
    >
        <div>
            <el-form :model="form" :rules="rules" ref="form" label-width="100px"
                     style="display: flex;flex-wrap: wrap;justify-content: space-between;">
                <el-form-item label="组套名称 : " prop="project_team" style="width:100%">
                    <el-input v-model="form.project_team" placeholder="" maxlength="30"></el-input>
                </el-form-item>
                <el-form-item label="组套价格 : " prop="price" style="width:100%">
                    <el-input v-model="form.price" placeholder="" maxlength="30"></el-input>
                </el-form-item>
                <el-form-item label="拼音 : " prop="pinyin" style="width:50%">
                    <el-input v-model="form.pinyin" placeholder="" maxlength="30"></el-input>
                </el-form-item>
                <el-form-item label="五笔 : " prop="wubi" style="width:50%">
                    <el-input v-model="form.wubi" placeholder="" maxlength="30"></el-input>
                </el-form-item>

                <el-form-item label="试管颜色 : " prop="tube_color" style="width:50%">
                    <el-select v-model="form.tube_color" style="width:160px;" placeholder="请选择">
                        <el-option
                                v-for="(item,index) in getDictionaryDataConfig('system','tube_color')"
                                :key="index"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="组套类型 : " prop="team_type" style="width:50%">
                    <el-select v-model="form.team_type" style="width:100%;" placeholder="请选择">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注 : " prop="name" style="width:100%;">
                    <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.remark"></el-input>
                </el-form-item>

                <el-form-item label="组套明细" style="width:50%;">
                    <el-select v-model="form.project_detail" filterable placeholder="请选择" @change="changeProject">
                        <el-option
                                v-for="item in projectList"
                                :key="item.new_id"
                                :label="item.project_name"
                                :value="item.new_id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="数量" style="width:50%;">
                    <div style="display:flex;">
                        <el-input v-model="form.number" style="margin-right:10px;"></el-input>
                        <el-button type="primary" @click="addProjectList">添加</el-button>
                    </div>
                </el-form-item>
            </el-form>
            <el-form>
                <el-table :data="tableData" border style="100%" :row-style="{ color: '#303133' }"
                          :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}"
                          highlight-current-row ref="tab">
                    <el-table-column align="center" prop="name" label="分类" width="120">
                        <template slot-scope="scope">
                            <div>{{scope.row.type == 2?getId(scope.row.statistical_classification):'耗材'}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="name" label="组套明细" width="120">
                        <template slot-scope="scope">{{scope.row.project_name}}</template>
                    </el-table-column>
                    <el-table-column align="center" prop="name" label="数量" width="120">
                        <template slot-scope="scope">{{scope.row.number}}</template>
                    </el-table-column>
                    <el-table-column align="center" prop="name" label="单位" width="120">
                        <template slot-scope="scope">
                            <div v-if="scope.row.type == 2">{{scope.row.unit}}</div>
                            <div v-if="scope.row.type == 3">{{getUnit(scope.row.unit)}}</div>

                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="name" label="单价" width="120">
                        <template slot-scope="scope">{{scope.row.price}}</template>
                    </el-table-column>
                    <el-table-column align="center" prop="name" label="操作">
                        <template slot-scope="scope">
                            <el-tooltip
                                    class="item"
                                    effect="dark"
                                    content="删除"
                                    placement="top"
                            >
                                <el-button
                                        type="danger"
                                        icon="el-icon-delete"
                                        size="small"
                                        @click="DeleteProject(scope.row.id,scope.$index)"
                                ></el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
        </div>


        <div slot="footer" class="dialog-footer">
            <el-button @click="hide">取 消</el-button>
            <el-button type="primary" @click="submitAction('form')">保 存</el-button>
        </div>
    </el-dialog>
</template>

<script>
  import { getDataConfig, getDictionaryDataConfig } from '@/utils/data'
  import {
    addProjectList,
    DeleteProject,
    getAllProjectList,
    getProjectDetail,
    saveProjectTeam
  } from '@/api/project/project'

  import { saveTeam } from '@/api/his/his'

  export default {
    data() {
      return {
        project_name: '',
        visible: false,
        formTitle: '',
        activeName: 'first',
        form: {
          project_team: '',
          price: 0,
          pinyin: '',
          wubi: '',
          tube_color: '',
          team_type: '',
          remark: '',
          project_detail: '',
          number: '1'
        },
        options: [
          { value: 1, label: '是' },
          { value: 2, label: '否' }
        ],
        value: '',
        radio: '1',
        rules: {
          project_team: [{ required: true, message: '请填写组套名称', trigger: 'blur' }],
          //   pinyin: [{ required: true, message: '请填写拼音' , trigger: 'blur' }],
          //   wubi: [{ required: true, message: '请填写五笔' , trigger: 'blur' }],
          price: [{ required: true, message: '请填写价格', trigger: 'change' }],
          //team_type: [{ required: true, message: '请填写组套类型', trigger: 'change' }]
        },
        tableData: [],
        projectList: [],
        tabList: [],
        itemList: []
      }
    },
    methods: {
      getUnit(id){
        var arr =  getDataConfig('hemodialysis','units')
        for(let i = 0;i < arr.length; i++){
          if(id == arr[i].id){
            return arr[i].name
          }
        }
      },
      changeProject() {
        this.form.number = 1

      },
      querySearch(queryString, cb) {
        var restaurants = this.projectList
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
        // 调用 callback 返回建议列表的数据
        cb(results)

      }, createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.project_name.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
        }
      },
      handleSelect(val) {
        this.project_name = val.project_name
        this.form.project_detail = val.id
      },
      getDataConfig(module, filed_name) {
        return getDataConfig(module, filed_name)
      },
      getDictionaryDataConfig(module, filed_name) {
        return getDictionaryDataConfig(module, filed_name)
      },
      _close: function(done) {
        done()
      },
      clear: function() {
        this.form.id = 0
        this.form.name = ''
        this.form.intro = ''
      },
      show(id) {
        this.visible = true
        this.formTitle = '新增'
      },
      hide() {
        this.visible = false
      },
      submitAction(formName) {
        this.$refs[formName].validate((valid) => {
          var params = {
            project_team: this.form.project_team,
            price: this.form.price,
            pinyin: this.form.pinyin,
            wubi: this.form.wubi,
            tube_color: this.form.tube_color,
            team_type: this.form.team_type,
            remark: this.form.remark
          }
          let data = {
            'info': this.tableData
          }
          saveTeam(data, params).then(response => {
            if (response.data.state == 1) {
              var projectTeam = response.data.data.projectTeam
              // console.log('projectTeam', projectTeam)
              this.$message.success('保存成功')
              this.visible = false
              this.form.project_team = '',
              this.form.price = '',
              this.form.pinyin = '',
              this.form.wubi = '',
              this.form.tube_color = '',
              this.form.team_type = '',
              this.form.remark = ''
              this.tableData = []
              this.form.number = ''
              this.$parent.getlist()
            } else {
              this.$message.error('项目组套名称已存在!')
            }
          })
        })
      },
      getlist() {
        let params = {
          keyword: ''
        }
        getAllProjectList(params).then(response => {
          if (response.data.state == 1) {
            var projectList = response.data.data.projectList
            var goodInfos = response.data.data.good_info
            
            for (let i = 0; i < projectList.length; i++) {

              let obj = {
                id: projectList[i].id,
                statistical_classification: projectList[i].statistical_classification,
                number: '1',
                project_name: projectList[i].project_name,
                unit: projectList[i].unit,
                price: projectList[i].price,
                type: 2,
                new_id: Math.floor((Math.random() + Math.floor(Math.random() * 9 + 1)) * Math.pow(10, 10 - 1)),
              }
              this.projectList.push(obj)
             
            }

            for (let i = 0; i < goodInfos.length; i++) {
              let obj = {
                id: goodInfos[i].id,
                statistical_classification: goodInfos[i].statistical_classification,
                number: '1',
                project_name: goodInfos[i].good_name + " " + goodInfos[i].specification_name,
                unit: goodInfos[i].good_unit,
                price: goodInfos[i].retail_price,
                type: 3,
                new_id: Math.floor((Math.random() + Math.floor(Math.random() * 9 + 1)) * Math.pow(10, 10 - 1)),
              }
              this.projectList.push(obj)
              
            }

            console.log("项目2323332",this.projectList)

          }
        })
      },

      getId(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
      },
      chagneInspection(id) {
        getProjectDetail(id).then(response => {
          if (response.data.state == 1) {
            var projectdetail = response.data.data.projecDetail
        
            this.tableData.push(projectdetail)
          }
        })
      },
      addProjectList() {
        
        for (let i = 0; i < this.projectList.length; i++) {
          if (this.form.project_detail == this.projectList[i].new_id) {
            this.projectList[i].number = this.form.number
            this.projectList[i].number = this.projectList[i].number.toString()
            
            this.tableData.push(this.projectList[i])
            this.form.project_detail = ''
            this.form.number = 1
          }
        }
       
      },
      DeleteProject(id, index) {
        this.$confirm('确认删除此项目吗?', '删除', {
          confirmButtonText: '确 定',
          cancelButtonText: '取 消',
          type: 'warning'
        }).then(() => {
          this.tableData.splice(index, 1)
        })
          .catch(() => {
          })
      },
     
    },
    created() {
      //获取所以的项目
      this.getlist()

    }, watch: {
      'tableData': function() {
        let c = 0
        this.form.price  = 0
        for (let i = 0; i < this.tableData.length; i++) {
          let a = parseFloat(this.tableData[i].number).toFixed(2)
          let b = parseFloat(this.tableData[i].price).toFixed(2)
         


          c = c + this.form.price + (a * b)

        }
        this.form.price = c.toFixed(2)
      }

    }
  }
</script>