Vue_New/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="sort" style="width: 50%">
          <el-input
            v-model="form.sort"
            placeholder=""
            maxlength="30"
          ></el-input>
        </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">
               {{ 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",
        sort:0,
      },
      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(val) {
      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,
          sort:parseInt(this.form.sort),
        };
        let data = {
          info: this.tableData,
        };
        saveTeam(data, params).then((response) => {
          if (response.data.state == 1) {
            var projectTeam = response.data.data.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.form.sort = ""
            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].packing_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);
          }

         
        }
      });
    },

    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() {
        if(this.tableData.length > 0){
          for(let i=0;i<this.tableData.length;i++){
            if(this.tableData[i].new_id == this.form.project_detail){
               this.$message.error("项目名称已存在")
               return
            }
          }
        }
        console.log("project_232332323232323232",this.projectList)
        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>