elizebeth/src/xt_pages/data/components/editInspection.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="name" 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="请选择" @change="changeProject">
                        <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="请选择">
                        <el-option
                                v-for="item,index in projectList"
                                :key="index"
                                :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">{{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.m_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 {
    editTeam
  } from '@/api/his/his'
  import {
    addProjectList,
    DeleteProject,
    getAllProjectList,
    getProjectTeamDetail,
    updatedProjectTeam
  } from '@/api/project/project'
  import { getDataConfig, getDictionaryDataConfig } from '@/utils/data'

  export default {
    data() {
      return {
        visible: false,
        formTitle: '',
        activeName: 'first',
        form: {
          id: '',
          project_team: '',
          price: '',
          pinyin: '',
          wubi: '',
          tube_color: '',
          team_type: '',
          remark: '',
          project_detail: '',
          number: '',
          item_id: ''
        },
        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: [],
        item_id: [],
        projectList: []
      }
    },
    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

      },
      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 = '编辑'
        this.getlist(id)
        this.getProjectTeamDetail(id)
        this.projectList = []
      }, 
      getlist(id) {

        getAllProjectList().then(response => {
          if (response.data.state == 1) {
         
            var projectList = response.data.data.projectList
            var goodInfos = response.data.data.good_info
            console.log("332323232323232",goodInfos)
            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,
                m_id: 0,
                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].packing_unit,
                price: goodInfos[i].retail_price,
                type: 3,
                m_id: 0,
                new_id: Math.floor((Math.random() + Math.floor(Math.random() * 9 + 1)) * Math.pow(10, 10 - 1))


              }
              this.projectList.push(obj)
            }
             console.log("编辑项目23332232323",this.projectList)
          }
        })
      },

      hide() {
        this.visible = false
      },
      getProjectTeamDetail(id) {
        getProjectTeamDetail(id).then(response => {
          if (response.data.state == 1) {
            this.tableData = []
            var projectTeamDetail = response.data.data.projectTeamDetail
            var hisList = response.data.data.hisList

            for (let i = 0; i < hisList.length; i++) {

              let obj = {
                m_id: hisList[i].id,
                id: hisList[i].project_id,
                number: hisList[i].number,
                type: hisList[i].type
              }
              if (hisList[i].type == 2) {
                obj['statistical_classification'] = hisList[i].project.statistical_classification
                obj['project_name'] = hisList[i].project.project_name
                obj['unit'] = hisList[i].project.unit
                obj['price'] = hisList[i].project.price

              } else {
                obj['project_name'] = hisList[i].good_info.good_name
                obj['unit'] = hisList[i].good_info.packing_unit
                obj['price'] = hisList[i].good_info.retail_price
              }
              this.tableData.push(obj)
            }
            this.form.id = projectTeamDetail.id
            this.form.project_team = projectTeamDetail.project_team
            this.form.price = projectTeamDetail.price
            this.form.pinyin = projectTeamDetail.pinyin
            this.form.wubi = projectTeamDetail.wubi
            this.form.tube_color = projectTeamDetail.tube_color
            if (projectTeamDetail.tube_color == 0) {
              this.form.tube_color = ''
            }
            this.form.team_type = projectTeamDetail.team_type
            if (projectTeamDetail.team_type == 0) {
              this.form.team_type = ''
            }
            this.form.remark = projectTeamDetail.remark
            // this.form.item_id = projectTeamDetail.item_id
            //  console.log("project",projectTeamDetail)
          }
        })
      },
      submitAction(formName) {
        this.$refs[formName].validate((valid) => {
          var arr = []
          for (let i = 0; i < this.tableData.length; i++) {
            if (this.tableData[i].m_id == 0) {
              arr.push(this.tableData[i])
            }
          }

          if (valid) {
            var params = {
              id: this.form.id,
              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': arr
            }            // console.log("params",params)
            editTeam(params, data).then(response => {
              if (response.data.state == 1) {
                // var projectTeam = response.data.data.projectTeam
                this.$message.success('保存成功')
                this.visible = false
                this.projectList = []
                // this.$parent.getlist()
              }
            })
          }
        })

      },
      getId(id) {
        console.log('id', id)
        var name = ''
        var statistics_category = getDictionaryDataConfig('system', 'statistics_category')
        console.log('statics', statistics_category)
        for (let i = 0; i < statistics_category.length; i++) {
          if (id == statistics_category[i].id) {
            name = statistics_category[i].name
          }
        }
        return name
      },
      addProjectList() {
       
        var project_name = ""
        for(let i=0;i<this.projectList.length;i++){
          if(this.form.project_detail == this.projectList[i].new_id){
             project_name = this.projectList[i].project_name
          }
        }
        if(this.tableData.length > 0){
          for(let i=0;i<this.tableData.length;i++){
            if(this.tableData[i].project_name == project_name){
               this.$message.error("项目名称已存在")
               return
            }
          }
        }
        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 = ''
          }
        }

      },
      DeleteProject(id, index) {

        if (id == 0) {
          this.$confirm('确认删除此项目吗?', '删除', {
            confirmButtonText: '确 定',
            cancelButtonText: '取 消',
            type: 'warning'
          }).then(() => {
            this.tableData.splice(index, 1)

          })
            .catch(() => {
            })

        } else {
          this.$confirm('确认删除此项目吗?', '删除', {
            confirmButtonText: '确 定',
            cancelButtonText: '取 消',
            type: 'warning'
          }).then(() => {
            DeleteProject(id).then(response => {
              if (response.data.state == 1) {
                this.tableData.splice(index, 1)

              } else {

              }
            })
          })
            .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)
          console.log(a)
          console.log(b)


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

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

    }
  }
</script>