vue简单页面模板

一、vue页面

<template>
  <div>
    <div class="elian-box">
      <div class="elian-title">
        <i></i>
        <div>议价列表查询</div>
      </div>
      <el-form
        ref="form"
        :model="formParams"
        label-width="120px"
        @keyup.enter.native.prevent="formSearch"
      >
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="注册证号" prop="regcertno">
              <el-input
                v-model="formParams.regcertno"
                placeholder=""
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="产品分类"
              prop="prodType"
            >
              <el-select
                v-model="formParams.prodType"
                placeholder="全部"
                size="small"
                clearable
              >
                <el-option
                  v-for="dic in dicJson.prodType"
                  :key="dic.value"
                  :label="dic.label"
                  :value="dic.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="议价状态"
              prop="stas"
            >
              <el-select
                v-model="formParams.stas"
                placeholder="全部"
                size="small"
                clearable
              >
                <el-option
                  v-for="dic in dicJson.yYAdvPricStas"
                  :key="dic.value"
                  :label="dic.label"
                  :value="dic.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col v-show="collapsed"   :span="6">
            <el-form-item label="产品名称" prop="prodName">
              <el-input
                v-model="formParams.prodName"
                placeholder=""
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col v-show="collapsed" :span="6">
            <el-form-item label="采购代码" prop="purcCode">
              <el-input
                v-model="formParams.purcCode"
                placeholder=""
              />
            </el-form-item>
          </el-col>
          <el-col v-show="collapsed" :span="6">
            <el-form-item label="规格" prop="prodSpec">
              <el-input
                placeholder=""
                v-model="formParams.prodSpec"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col v-show="collapsed" :span="6">
            <el-form-item label="型号" prop="prodMol">
              <el-input
                placeholder=""
                v-model="formParams.prodMol"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col v-show="collapsed" :span="6">
            <el-form-item label="生产企业" prop="prodentp">
              <el-input
                placeholder=""
                v-model="formParams.prodentp"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col v-show="collapsed" :span="6">
            <el-form-item label="包装信息" prop="pacInfo">
              <el-input
                placeholder=""
                v-model="formParams.pacInfo"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" class="form-button-group">
            <el-form-item label-width="0">
              <el-button @click="collapsed = !collapsed"
              >{{ collapsed ? '收起' : '展开' }}
                <i
                  :class="{
                    'el-icon-arrow-down': !collapsed,
                    'el-icon-arrow-up': collapsed
                  }"
                />
              </el-button>
              <el-button
                type="primary"
                :loading="tableData.gridLoading"
                @click="formSearch()"
              >查询</el-button
              >
              <el-button @click="clearForm('form'), formSearch()"
              >重置</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
    </div>
    <elian-tool>
      <template #left>
        <div class="elian-title">
          <i></i>
          <div>议价列表</div>
        </div>
      </template>
    </elian-tool>
    <div class="elian-box">
      <elian-grid			分页
        ref="table"
        :data="tableData.rows"
        :loading="gridLoading"
        :page-size="pageSize"
        :page-sizes="pageSizes"
        :current-page="currentPage"
        :total="total"
        height="200"
        resize
        @pagination-current-change="paginationCurrentChange"
        @pagination-size-change="paginationSizeChange"
        @selection-change="selectionChange"
      >
        <el-table-column
          prop=""
          label=""
          width="60"

          show-overflow-tooltip
        >
          <template #default="{row}">
            <div v-if="new Date(row.regcertExpyEndtime)<=new Date(now)"  style="display: inline-block">
              <el-tooltip class="item" effect="light" content="注册证有效" placement="top-start">
                <i data-v-1f2a5c95="" class="el-icon-s-opportunity" style="color: #7bea85; font-size: 15px;"></i>
              </el-tooltip>
            </div>
            <div v-if="new Date(row.regcertExpyEndtime)>new Date(now)"  style="display: inline-block">
              <el-tooltip class="item"  effect="light" content="注册证已过期" placement="top-start">
                <i data-v-1f2a5c95="" class="el-icon-s-opportunity" style="color: rgb(203, 68, 74); font-size: 15px;"></i>
              </el-tooltip>
            </div>
            <div v-if="row.pubonlnStas==2" style="display: inline-block">
              <el-tooltip class="item" effect="light" content="重点监控" placement="top-start">
                <i data-v-1f2a5c95="" class="el-icon-s-flag" style="color: rgb(203, 68, 74); font-size: 15px;"></i>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="prodCode"
          label="操作"
          width="160"
        >
          <template #default="{row}">
            <div v-if="row.stas==1">
              <div>
                <el-tooltip class="item"  effect="dark" content="废除" placement="top-start">
                  <el-button type="text"  @click="dialogVisible1 = true,stas=row.stas,yjId=row.pricId,yyId=row.hospAcct">废除</el-button>
                </el-tooltip>
                <el-tooltip class="item"  effect="dark" content="日志" placement="top-start">
                  <el-button type="text"  @click="getPricLogListById(yjId=row.pricId,qyId=row.delventpId),dialogVisible9 = true">日志</el-button>
                </el-tooltip>
              </div>
            </div>
            <div v-if="row.stas==2">
              <div>
                <el-tooltip class="item"  effect="dark" content="日志" placement="top-start">
                  <el-button type="text"  @click="getPricLogListById(yjId=row.pricId,qyId=row.delventpId),dialogVisible9 = true">日志</el-button>
                </el-tooltip>
              </div>
            </div>
            <div v-if="row.stas==0 || row.stas==3">
              <div>
                <el-tooltip class="item"  effect="dark" content="同意" placement="top-start">
                  <el-button type="text"  @click="dialogVisible2 = true,stas=row.stas,yjId=row.pricId,price=row.pric,yyId=row.hospAcct">同意</el-button>
                </el-tooltip>
                <el-tooltip class="item"  effect="dark" content="拒绝" placement="top-start">
                  <el-button type="text"  @click="dialogVisible3 = true,stas=row.stas,yjId=row.pricId,price=row.pric,yyId=row.hospAcct">拒绝</el-button>
                </el-tooltip>
              </div>
              <div>
                <el-tooltip class="item"  effect="dark" content="议价" placement="top-start">
                  <el-button type="text"  @click="empty(),dialogVisible4 = true,stas=row.stas,yjId=row.pricId,yyId=row.hospAcct">议价</el-button>
                </el-tooltip>
                <el-tooltip class="item"  effect="dark" content="日志" placement="top-start">
                  <el-button type="text"  @click="getPricLogListById(yjId=row.pricId,qyId=row.delventpId),dialogVisible9 = true">日志</el-button>
                </el-tooltip>
              </div>
            </div>
            <div>
              <div v-if="row.stas==4">
                <div v-if="row.pric!=0" style="display: inline-block;margin-right: 10px">
                  <el-tooltip class="item"  effect="dark" content="撤回" placement="top-start">
                    <el-button type="text"  @click="dialogVisible7 = true,stas=row.stas,yjId=row.pricId,yyId=row.hospAcct">撤回</el-button>
                  </el-tooltip>
                </div>
                <div v-if="row.pric==0" style="display: inline-block;margin-right: 10px">
                  <el-tooltip class="item"  effect="dark" content="取消" placement="top-start">
                    <el-button type="text"  @click="dialogVisible6 = true,stas=row.stas,yjId=row.pricId,yyId=row.hospAcct">取消</el-button>
                  </el-tooltip>
                </div>
                <el-tooltip class="item"  effect="dark" content="日志" placement="top-start">
                  <el-button type="text"  @click="getPricLogListById(yjId=row.pricId,qyId=row.delventpId),dialogVisible9 = true">日志</el-button>
                </el-tooltip>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          prop="stas"
          label="议价状态"
          width="150"
          show-overflow-tooltip
        >
          <template #default="{row}">
            <!---1:初次发起议价后撤回,0:未确认,1:同意议价,2:拒绝议价,3:医院反馈新价格,4:企业反馈新价格-->
            <div v-if="row.stas==0">
              <span>未确认</span>
            </div>
            <div v-if="row.stas==1">
              <span>同意议价</span>
            </div>
            <div v-if="row.stas==2">
              <span>拒绝议价</span>
            </div>
            <div v-if="row.stas==3">
              <span v-if="row.pric!=0">医院反馈新价格</span>
              <span v-if="row.pric==0">医院废除议价价格</span>
            </div>
            <div v-if="row.stas==4">
              <span v-if="row.pric!=0">企业反馈新价格</span>
              <span v-if="row.pric==0">企业废除议价价格</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="hospName"
          label="医疗机构"
          width="200"
        >
        </el-table-column>

        <el-table-column
          prop=""
          label="本次议价价格"
          width="140"
          show-overflow-tooltip
        >
          <template #default="{row}">
            <span v-if="row.stas==1" v-html="row.finlPric"></span>
            <span v-if="row.stas!=1" v-html="row.pric"></span>
          </template>
        </el-table-column>
        <el-table-column
          prop="purcCode"
          label="采购代码"
          width="140"
          show-overflow-tooltip
        />
        <el-table-column
          prop="prodType"
          label="产品分类"
          width="160"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="prodName"
          label="产品名称"
          width="200"
        />
        <el-table-column
          prop="regcertno"
          label="注册证号"
          width="180"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="prodSpec"
          label="规格"
          width="150"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="prodMol"
          label="型号"
          width="150"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="prodentp"
          label="生产企业"
          width="150"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="pacInfo"
          label="包装信息"
          width="100"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="purcUnt"
          label="采购单位"
          show-overflow-tooltip
        >
        </el-table-column>
      </elian-grid>
    </div>
    <div class="app-container" style="width: 90px">
      <!--:before-close="handleClose"-->
      <el-dialog title="操作提示" :visible.sync="dialogVisible1"  width="30%">
        确定要废除此次议价的价格吗？
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
          <el-button type="primary" @click="upPriceByStas(5),dialogVisible1=false" :stas="stas" :id="yjId">确定</el-button>
        </span>
      </el-dialog>
      <el-dialog title="操作提示" :visible.sync="dialogVisible2"  width="30%">
        确定同意该议价价格吗？
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="upPriceByStas(2),dialogVisible2=false" :stas="stas" :id="yjId">确定</el-button>
        </span>
      </el-dialog>
      <el-dialog title="操作提示" :visible.sync="dialogVisible3"  width="30%">
        确定拒绝该议价价格吗？
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible3 = false">取 消</el-button>
          <el-button type="primary" @click="upPriceByStas(3),dialogVisible3=false" :stas="stas" :id="yjId">确定</el-button>
        </span>
      </el-dialog>
      <el-dialog title="操作提示" :visible.sync="dialogVisible4"  width="30%">
        价格(元)：
        <el-input
          type="text"
          placeholder=""
          v-model="price"
          style="width:60%"
          @keyup.native="enterFun"
        ></el-input>
       <span slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible4 = false">取 消</el-button>
         <el-button type="primary" @click="checkPrice(),dialogVisible4=true" >提交</el-button>
       </span>
      </el-dialog>
      <el-dialog title="操作提示" :visible.sync="dialogVisible5"  width="30%">
        确定提交此价格吗？
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible5 = false">取 消</el-button>
          <el-button type="primary" @click="upPriceByStas(4)" :stas="stas" :id="yjId">确定</el-button>
        </span>
      </el-dialog>
      <el-dialog title="操作提示" :visible.sync="dialogVisible6"  width="30%">
        确定要取消废除议价操作吗？
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible6 = false">取 消</el-button>
          <el-button type="primary" @click="upPriceByStas(6),dialogVisible6=false" :stas="stas" :id="yjId">确定</el-button>
        </span>
      </el-dialog>
      <el-dialog title="操作提示" :visible.sync="dialogVisible7"  width="30%">
        确定要撤回议价操作吗？
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible7 = false">取 消</el-button>
          <el-button type="primary" @click="upPriceByStas(7),dialogVisible7=false" :stas="stas" :id="yjId">确定</el-button>
        </span>
      </el-dialog>
      <el-dialog title="" :visible.sync="dialogVisible9"  width="50%">
        <elian-grid
          ref="table"
          :data="tableData1.row"
          :page-size="tableData1.pageSize"
          :current-page="tableData1.currentPage"
          :page-sizes="pageSizes"
          :total="tableData1.total"
          height="80"
          @pagination-current-change="paginationCurrentChange1"
          @pagination-size-change="paginationSizeChange1"
          @selection-change="selectionChange1"
          style="width: 100%">
          <el-table-column
            prop="hospName"
            label="操作人"
            width="280">
            <template #default="{row}">
              <span v-if="row.userId==row.entpId" v-html="row.entpName"></span>
              <span v-if="row.userId==row.hospId" v-html="row.hospName"></span>
            </template>
          </el-table-column>
          <el-table-column
            prop="oprtTime"
            label="操作时间"
            width="280">
          </el-table-column>
          <el-table-column
            prop="oprtCont"
            label="操作内容">
          </el-table-column>
        </elian-grid>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  import gridMixins from '@/components/ElianGrid/grid-mixins'
  import formMixins from '@/mixins/form'
  import { getPricBListByBusiness,updatePriceAndStasById,getPricLogListById } from '@/api/mcstrade/trnsProdMcs'
  import { dic } from '@/api/dictJson'

  export default {
    mixins: [gridMixins, formMixins],
    data() {
      return {
        dialogVisible1:false,
        dialogVisible2:false,
        dialogVisible3:false,
        dialogVisible4:false,
        dialogVisible5:false,
        dialogVisible6:false,
        dialogVisible7:false,
        dialogVisible9:false,
        tableHeight: window.innerHeight  - 200, //窗口的高度减去你需要减去的高度
        refs: {
          form: 'form',
          table: 'table'
        },
        formParams: {},
        tableData: {
          rows: []
        },
        tableData1:{
          row:[],
          pageSize:10,
          currentPage:1,
          total:''
        },
        selectData: {
          // 选中列表
          selectedList: [],
          // 未选中数据时禁用
          isDisabled: true
        },
        userRoleType: null,
        dics: {
          pubonlnStasJSON: dic.PUBONLN
        },
        cpId:'',
        yjId:'',
        qyId:'',
        stas:'',
        price:'',
        now:'',
      }
    },
    created() {
      this.userRoleType = this.$store.state.user.info.userRoleType
    },
    methods: {
      /**
       * 获取分页数据
       */
      getList() {
        this.gridLoading = true
        var date = new Date();
        this.now =date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
        getPricBListByBusiness(this.queryData)
          .then(({ data }) => {
            this.tableData.rows = data.records
            this.currentPage = data.current
            this.total = data.total
            this.gridLoading = false
          })
          .catch(() => {
            this.gridLoading = false
          })
      },
      /**
       * 查询数据
       */
      formSearch() {
        this.currentPage = 1
        this.pageSize = 10
        this.formParams = Object.assign({}, this.formParams, this.formParams)
        console.log(this.formParams)
        this.handleSearch(this.formParams, true)
      },
      /**
       * 获取表格选中数据
       */
      selectionChange(selection) {
        this.selectData.selectedList = selection
        this.selectData.isDisabled = selection.length === 0
      },
      upPriceByStas(num){
        if(num==4 && this.price==""){
          this.dialogVisible5=false
          this.$message.error("议价价格不能为空")
        }else{
          this.dialogVisible5=false
          this.dialogVisible4=false
          updatePriceAndStasById(this.yjId,this.stas,this.price,null,this.yyId,num)
            .then(({ data }) => {
              console.log(data)
              this.getList();
              //this.gridLoading = false
            })
            .catch(() => {
              this.gridLoading = false
            })
        }
      },
      getPricLogListById(yjId,qyId){
        var size=this.tableData1.pageSize;
        var currentPage=this.tableData1.currentPage;
        getPricLogListById(yjId,qyId,size,currentPage).then(({data})=>{
          this.tableData1.row = data.records
          this.tableData1.currentPage = data.current
          this.tableData1.total = data.total
        })
          .catch(()=>{
            this.gridLoading = false
          })
      },
      paginationCurrentChange1(currentPage) {
        this.tableData1.currentPage = currentPage
        this.getPricLogListById(this.yjId,this.qyId);
      },
      paginationSizeChange1(pageSize) {
        this.tableData1.pageSize = pageSize
        this.getPricLogListById(this.yjId,this.qyId);
      },
      selectionChange1(selection) {
        this.selection = selection
      },
      empty(){
        this.price=""
      },
      enterFun(){
        if ( /^(([1-9][0-9]*)|(([0]\.\d{0,2}|[1-9][0-9]*\.\d{0,2})))$/.test(this.price)) {
          this.price = this.price;
        } else {
          if (this.price.length === 1 && this.price === '.') {
            this.price='0.'
          } else {
            this.price=''
          }
        }
      },checkPrice(){
        if(Number(this.price)>Number(100000000)){
          this.$message.error("议价价格过大，请重新输入");
          this.price='';
          return;
        }else{
          this.dialogVisible5=true;
        }
      }
    }
  }
</script>

二、引进来的js

import request from "@/utils/request";

/**
 * 分页获取
 * @param {Object} params
 */
export function fetchTrnsProdDrugForPage(params) {
  return request.get("/tps-local-bd/web/trns/trnsProdMcs/page", {
    params
  });


/**
 *取消撤销(企业端)
 * @param params
 * @returns {AxiosPromise<any>}
 */
export function getBasDelRemoveHosptailEnterprise(params) {
  return request.post("/basdelRemoveHosptailEnterprise", params);
}
/**
 * 查询医院账号的议价管理中发起议价列表
 * @param params
 * @returns {AxiosPromise<any>}
 */
export function getPricBList(params) {
  return request.post(
    '/bargainGetPricBListByRelease',params)
}
/**
 * 查询医院账号的议价管理中查看议价列表
 * @param params
 * @returns {AxiosPromise<any>}
 */
export function getPricBListByLook(params) {
  return request.post(
    '/bargainGetPricBListByLook',params)
}
/**
 * 查询企业账号的议价列表
 * @param params
 * @returns {AxiosPromise<any>}
 */
export function getPricBListByBusiness(params) {
  return request.post(
    '/bargainGetPricBListByBusiness',params)
}


/**
 * 根据议价id更新产品状态
 * @param yJId  议价id
 * @param stas  为null时做添加操作，-1:初次发起议价后撤回,0:未确认,1:同意议价,2:拒绝议价,3:医院反馈新价格,4:企业反馈新价格
 * @param price 价格
 * @param cpId  产品id
 * @param delventpId 企业id
 * @param num 2：同意，3：拒绝，4：议价
 * @returns {AxiosPromise<any>}
 */
export function updatePriceAndStasById(yJId,stas,price,cpId,delventpId,num) {
  return request.post(
    '/bargainUpdatePriceAndStasById',{"pricId":yJId,"stas":stas,"pric":price,"prodId":cpId,"delventpId":delventpId,"num":num})
}

/**
 * 根据议价id获取日志
 * @param id
 * @returns {AxiosPromise<any>}
 */
export function getPricLogListById(id,yyId,size,currentPage){
  return request.post(
    '/bargainGetPricLogListById',{"pricId":id,"extId":yyId,"size":size,"current":currentPage})
}
/**
 * 根据产品id获取平均值
 * @param obj
 */
window.getFiveCgyById=function (obj) {
  var price = document.getElementById(obj.id).value;
  if ( /^(([1-9][0-9]*)|(([0]\.\d{0,2}|[1-9][0-9]*\.\d{0,2})))$/.test(price)) {
    price = price;
  } else {
        if (price.length === 1 && price === '.') {
            price='0.'
        } else {
          //price.substring(0, price.length - 1);
            document.getElementById(obj.id).value="";
            return;
        }
  }

 // if((/^(0|[1-9][0-9]*)$/.test(price))){
  request.post(
    '/bargainGetFiveCgyById', {"prodId": obj.id}).then(function (data) {
    var fiveCgy = data.data.fiveCgy;
    if (fiveCgy == null) {
      document.getElementById("spanNineLine").innerHTML = "当前位次【1】；暂无谈判参考价";
    } else {
      var avg = (Number(fiveCgy.highPric) - Number(fiveCgy.lowPric)) / 9;
      //默认最低价为0
      var low = 0;
      var el = document.getElementById("opportunity");
/*      el.style.position="absolute";
      el.style.top="31%";*/
      var c=1;
      var f = '60';
      //21.9-12.5=9.4
      for (var i = 1; i < 10; i++) {
        if (i > 1) {
          low = fiveCgy.lowPric + avg * (i - 1);
        }
        if(i==9 && price>fiveCgy.lowPric + low * i){
          c=i;
          el.style.right = (Number(f) + 41 * (i - 1)) + "px";
        }else{
          if (price > low && price < fiveCgy.lowPric + low * i) {
            if (i == 1) {
              el.style.right =f + "px";
              c=i;
            } else if (i == 2) {
              c=i;
              el.style.right = (Number(f) + 41) + "px";
            } else if (i == 3) {
              c=i;
              el.style.right = (Number(f) + 41 * (i - 1)) + "px";
            }else if(i>=6){
              c=i;
              el.style.right = (Number(f) + 41 * (i - 1)) + "px";
            }
          }
        }
      }
      //谈判参考价
      var tpPrice = fiveCgy.price == 0 ? "暂无谈判参考价" : "谈判参考价："+fiveCgy.price+"元";
      document.getElementById("spanNineLine").innerHTML = "当前位次【"+c+"】；历史采购最低价【" + fiveCgy.lowPric + "】；\n" +
        "          历史采购平均价【" + fiveCgy.avePric + "】；\n" +
        "          历史采购中位价【" + fiveCgy.midPric + "】；\n" +
        "          历史采购加权平均价【" + fiveCgy.wtPric + "】；" + tpPrice ;
    }
  });
}