wshsj.html 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta http-equv="X-UA-Compatible" content="IE=edge" />
  6. <!-- <meta name="viewport" content="width=device-width, initial-scale=1" /> -->
  7. <meta name="format-detection" content="telephone=no" />
  8. <title>刷制品质量监督检验中心</title>
  9. <meta name="keywords" content="刷制品质量监督检验中心">
  10. <meta name="description" content="刷制品质量监督检验中心">
  11. <link href="./static/css/drag.css" rel="stylesheet" type="text/css">
  12. <!-- <script src="https://www.qsqrkg.com/vendor/vendor.js"></script> -->
  13. <script type="text/javascript" src="./static/js/jquery.min.js"></script>
  14. <script type="text/javascript" src="./static/js/custom.js"></script>
  15. <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  16. <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  17. <!-- <script type="text/javascript" src="./static/js/drag.js"></script> -->
  18. <link href="./static/css/vendor.css" rel="stylesheet" />
  19. <link href="./static/css/style.css" rel="stylesheet" />
  20. <link href="./static/css/custom.css" rel="stylesheet" />
  21. <link href="./static/css/printstyle.css" rel="stylesheet"/>
  22. <link href="static/css/index.css" rel="stylesheet"/>
  23. <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  24. </head>
  25. <body class="pcs" style="display: none;">
  26. <div id="appse">
  27. <header>
  28. <div class='a'>
  29. <div class='container'>
  30. <div class='tool'>
  31. <div class='fr'>
  32. <a href='' target='_blank'></a>
  33. </div>
  34. <!-- <script src='static/js/time.js'></script> -->
  35. <div class='loca'>
  36. <span> 欢迎访问 刷制品质量监督检验中心 ! 今天{{date_show}} {{week}}</span>
  37. </div>
  38. <div class='srch'><input type='text' class='tt' placeholder='输入要查找的信息' v-model="inpute"
  39. @blur="inpubie" /> <img src='static/picture/icon_ztl_ss@2x.png' @click="nhyesee">
  40. </div>
  41. </div>
  42. </div>
  43. </div>
  44. <div class='b'>
  45. <div class='container'>
  46. <div class='logo'>
  47. <a href='javascript:void(0)'><img src='static/picture/pic_hp_dh_logo@2x.png' alt='' /></a>
  48. </div>
  49. <div class='frs fr' v-if="hyew == true">
  50. <div class='menu _list'>
  51. <ul>
  52. <li v-for="item,index in tablide" :key="index" @mouseover="dheyfr(item.label)">
  53. <div :class="[ nue == item.label ? 'on' : '' , 'i' ]">
  54. <p @click="tabcl(item.id,item.label)"><a href='javascript:void(0)'>{{item.label}}</a></p>
  55. <!-- ulrw -->
  56. <div class='ex' >
  57. <!-- :class="[inhye]" -->
  58. <!-- ulrw -->
  59. <p > <a href='javascript:void(0)' v-for="(items,indexs) in item.children" :key="items.id"
  60. @click.stop="jeuese(items)" >{{items.label}}</a></p>
  61. <!-- jggk.html -->
  62. <!-- <p><a href='zzhjg.html'>组织架构</a></p> -->
  63. </div>
  64. </div>
  65. </li>
  66. </ul>
  67. </div>
  68. </div>
  69. <a href='' class='mbtn pc-hide'></a>
  70. </div>
  71. </div>
  72. </header>
  73. </div>
  74. <div id="app">
  75. <main>
  76. <div class="u-fullpart" >
  77. <div class="p_container">
  78. <div class="container">
  79. <div class="u-pagepath">
  80. <p>
  81. <a href="index.html">首页</a>
  82. <i>·</i>
  83. <a href="#">办事服务</a>
  84. <i>·</i>
  85. <a href="wshsj.html">送检登记</a>
  86. </p>
  87. </div>
  88. <div class="p_box">
  89. <div class="p_box_tit cf"><p class="fl p_box_titl">送检登记</p>
  90. </div>
  91. <div class="pd10">
  92. <form class="pw_main">
  93. <div class="pw_list">
  94. <p>样品名称:</p>
  95. <input placeholder="请输入样品名称" v-model="form.sampleName" class="pw_inp"/>
  96. </div>
  97. <div class="pw_list cf">
  98. <div class="pw_lista fl">
  99. <p>样品数量:</p>
  100. <input placeholder="请输入样品数量,单位默认:个" v-model="form.sampleNum" class="pw_inp"/>
  101. </div>
  102. <div class="pw_lista fr">
  103. <p>规格型号:</p>
  104. <input placeholder="请输入规格型号" v-model="form.normsModel" class="pw_inp"/>
  105. </div>
  106. </div>
  107. <div class="pw_list cf">
  108. <div class="pw_lista fl">
  109. <p>检验项目:</p>
  110. <div class="pw_inp pw_select" id="pw_selecta">
  111. <input placeholder="请选择检验项目" :value='testItems' disabled="" class="pflex1"/>
  112. <img src="static/images/printimg/icon_up.png" class="pw_listb"/>
  113. <div class="pw_selecta" >
  114. <div v-if="inspectlist.length" style="padding: 0;">
  115. <div :class="ite.dictValue==form.testItems?'act':''" v-for="(ite,idx) in inspectlist" @click="getDicFn(0,ite)">{{ite.dictLabel}}</div>
  116. </div>
  117. <div v-else style="color: #999999;">暂无数据</div>
  118. </div>
  119. </div>
  120. </div>
  121. <div class="pw_lista fr">
  122. <p>提供方式:</p>
  123. <div class="pw_inp pw_select" id="pw_selectb">
  124. <input placeholder="请选择提供样品方式" :value='provideType' disabled="" class="pflex1"/>
  125. <img src="static/images/printimg/icon_up.png" class="pw_listb"/>
  126. <div class="pw_selecta" >
  127. <div v-if="provisionList.length" style="padding: 0;">
  128. <div :class="ite.dictValue==form.provideType?'act':''" v-for="(ite,idx) in provisionList" @click="getDicFn(1,ite)">{{ite.dictLabel}}</div>
  129. </div>
  130. <div v-else style="color: #999999;">暂无数据</div>
  131. </div>
  132. </div>
  133. </div>
  134. </div>
  135. <!-- 报告获取 -->
  136. <div class="pw_list cf">
  137. <div class="pw_lista fl">
  138. <p>取报告方式:</p>
  139. <div class="pw_inp pw_select" id="pw_selectc">
  140. <input placeholder="请选择取报告方式" :value='takeReportType' disabled="" class="pflex1"/>
  141. <img src="static/images/printimg/icon_up.png" class="pw_listb"/>
  142. <div class="pw_selecta" >
  143. <div v-if="takeReportList.length" style="padding: 0;">
  144. <div :class="ite.dictValue==form.takeReportType?'act':''" v-for="(ite,idx) in takeReportList" @click="getDicFns(0,ite)">{{ite.dictLabel}}</div>
  145. </div>
  146. <div v-else style="color: #999999;">暂无数据</div>
  147. </div>
  148. </div>
  149. </div>
  150. <div class="pw_lista fr">
  151. <p>样品处理方式:</p>
  152. <div class="pw_inp pw_select" id="pw_selectd">
  153. <input placeholder="请选择样品处理方式" :value='handleType' disabled="" class="pflex1"/>
  154. <img src="static/images/printimg/icon_up.png" class="pw_listb"/>
  155. <div class="pw_selecta" >
  156. <div v-if="handleList.length" style="padding: 0;">
  157. <div :class="ite.dictValue==form.handleType?'act':''" v-for="(ite,idx) in handleList" @click="getDicFns(1,ite)">{{ite.dictLabel}}</div>
  158. </div>
  159. <div v-else style="color: #999999;">暂无数据</div>
  160. </div>
  161. </div>
  162. </div>
  163. </div>
  164. <!-- 地址 -->
  165. <div class="pw_list cf" v-if="adrflag">
  166. <div class="pw_lista fl">
  167. <p>收件人姓名:</p>
  168. <input placeholder="请输入收件人姓名" v-model="form.takeName" class="pw_inp"/>
  169. </div>
  170. <div class="pw_lista fr">
  171. <p>收件人手机号:</p>
  172. <input placeholder="请输入收件人手机号" v-model="form.takePhone" class="pw_inp"/>
  173. </div>
  174. </div>
  175. <div class="pw_list" v-if="adrflag">
  176. <p>收件人地址:</p>
  177. <input placeholder="请输入收件人地址" v-model="form.takeAddress" class="pw_inp"/>
  178. </div>
  179. <!-- 报告获取 -->
  180. <div class="pw_list cf">
  181. <div class="pw_lista fl">
  182. <p>送检单位名称:</p>
  183. <input placeholder="请输入送检单位名称" v-model="form.manufacturerName" class="pw_inp"/>
  184. </div>
  185. <div class="pw_lista fr">
  186. <p>联系电话:</p>
  187. <input placeholder="请输入联系电话" v-model="form.manufacturerPhone" class="pw_inp"/>
  188. </div>
  189. </div>
  190. <div class="pw_list cf">
  191. <div class="pw_lista fl">
  192. <p>委托单位名称:</p>
  193. <input placeholder="请输入委托单位名称" v-model="form.inspectedName" class="pw_inp"/>
  194. </div>
  195. <div class="pw_lista fr">
  196. <p>联系电话:</p>
  197. <input placeholder="请输入联系电话" v-model="form.inspectedPhone" class="pw_inp"/>
  198. </div>
  199. </div>
  200. <div class="pw_list ">
  201. <p>备注信息:</p>
  202. <textarea placeholder="请输入其他需要备注说明的信息" v-model="form.remark" class="pw_text"></textarea>
  203. </div>
  204. <div class="pb_searchbtn pb_searchbtna" @click="getSubmit">确认提交</div>
  205. <p class="pw_tit">* 本机构检验时间一般不超过10个工作日,特殊情况在收到送检样品时会向客户说明。</p>
  206. </form>
  207. </div>
  208. </div>
  209. </div>
  210. </div>
  211. </div>
  212. <!-- 分割 -->
  213. <!-- <div class="foot_line"></div> -->
  214. <!-- 滑块验证 -->
  215. <center>
  216. <!-- <div id="drag"></div> -->
  217. <el-dialog
  218. title="验证"
  219. :visible.sync="dialogVisible"
  220. width="30%">
  221. <div class="jc-component__range">
  222. <div class="jc-range" :class="rangeStatus?'success':''" >
  223. <i @mousedown="rangeMove" :class="rangeStatus?'el-icon-success':'el-icon-d-arrow-right'" :style="disX==0?'transform: translateX(0px);':''"></i>
  224. {{rangeStatus?successText:startText}}
  225. </div>
  226. </div>
  227. <span slot="footer" class="dialog-footer">
  228. <el-button @click="dialogVisible = false">取 消</el-button>
  229. <el-button type="primary" @click="getDarg">确 定</el-button>
  230. </span>
  231. </el-dialog>
  232. </center>
  233. </main>
  234. </div>
  235. </body>
  236. <style>
  237. /* .el-input /deep/ .el-input__inner {
  238. text-align: center;
  239. } */
  240. </style>
  241. <script src="static/js/footer.js" type="text/javascript" charset="utf-8"></script>
  242. <script>
  243. $(document).ready(function() {
  244. $('body').click(function(e) {
  245. var e = e || window.event; //浏览器兼容性
  246. var elem = e.target || e.srcElement;
  247. // console.log(elem.id)
  248. while (elem) {
  249. if(elem.id && elem.id == 'pw_selecta'||elem.id &&elem.id == 'pw_selectb'||elem.id &&elem.id == 'pw_selectc'||elem.id &&elem.id == 'pw_selectd') {
  250. return;
  251. }
  252. elem = elem.parentNode;
  253. }
  254. if ($('.pw_selecta').is(':visible') ) {
  255. $('.pw_selecta').hide();
  256. $(".pw_listb").removeClass('act')
  257. }
  258. })
  259. $(".pw_select").click(function(){
  260. if($(this).find(".pw_selecta").is(":hidden")){
  261. $(".pw_selecta").hide();
  262. $(".pw_listb").removeClass('act')
  263. $(this).find(".pw_selecta").show()
  264. $(this).find(".pw_listb").addClass('act')
  265. }else{
  266. $(this).find(".pw_selecta").hide()
  267. $(this).find(".pw_listb").removeClass('act')
  268. }
  269. })
  270. });
  271. </script>
  272. <!-- <script src="static/js/script.js"></script> -->
  273. <script src="static/js/custom.js"></script>
  274. <script type="text/javascript" src="static/js/header.js"></script>
  275. <script type="text/jscript">
  276. var app=new Vue({
  277. el:'#app',
  278. data:{
  279. inpute: '',
  280. tablide: [],
  281. hyew: false,
  282. nue: "首页",
  283. week: '',
  284. date_show: '',
  285. ulrw: '',
  286. mjuede: '',
  287. tyer: {
  288. type: 0
  289. },
  290. form:{
  291. "sampleName":"",//样品名称
  292. "sampleNum":"",//样品数量
  293. "normsModel":"",//规格型号
  294. "testItems":"",//检验项目
  295. "provideType":"",//提供方式
  296. "manufacturerName":"",//生产单位名称
  297. "manufacturerPhone":"",//生产单位电话
  298. "inspectedName":"",//受检单位名称
  299. "inspectedPhone":"",//受检单位电话
  300. "remark":"",
  301. "takeReportType":"",//取报告方式
  302. "handleType":"",//样品处理方式
  303. "takeName":'',//收件人姓名
  304. "takePhone":'',//收件人手机号
  305. "takeAddress":'',//收件人地址
  306. },
  307. base_url:'https://jyzx.qs163.cn/prod-api',
  308. // base_url:'http://192.168.101.11:8090',
  309. labelPosition: 'top',
  310. inspectlist:[],
  311. provisionList:[],
  312. takeReportList:[],
  313. handleList:[],
  314. testItems:'',
  315. provideType:'',
  316. takeReportType:'',
  317. handleType:'',//样品处理方式
  318. disX : 0,
  319. rangeStatus: false,
  320. successText:'验证成功',
  321. startText:'请拖住滑块,拖动到最右边',
  322. dialogVisible:false,
  323. adrflag:false,
  324. },
  325. created(){
  326. this.getInspect();
  327. this.getprovision();
  328. this.gettakeReport();
  329. this.gethandle();
  330. },
  331. methods:{
  332. // //获取字典值
  333. getInspect(){
  334. var that=this;
  335. $.ajax({
  336. url:this.base_url+ '/gateway/query/type/inspection_item',
  337. type: 'GET',
  338. data: {},
  339. dataType: 'json',
  340. success: function(res) {
  341. if (res.code == 200) {
  342. that.inspectlist=res.data
  343. } else {
  344. that.$message({
  345. message: res.msg,
  346. type: 'error'
  347. });
  348. }
  349. }
  350. })
  351. },
  352. getprovision(){
  353. var that=this;
  354. $.ajax({
  355. url:this.base_url+ '/gateway/query/type/provision_mode',
  356. type: 'GET',
  357. data: {},
  358. dataType: 'json',
  359. success: function(res) {
  360. if (res.code == 200) {
  361. that.provisionList=res.data
  362. } else {
  363. that.$message({
  364. message: res.msg,
  365. type: 'error'
  366. });
  367. }
  368. }
  369. })
  370. },
  371. gettakeReport(){
  372. var that=this;
  373. $.ajax({
  374. url:this.base_url+ '/gateway/query/type/takeReport_type',
  375. type: 'GET',
  376. data: {},
  377. dataType: 'json',
  378. success: function(res) {
  379. if (res.code == 200) {
  380. that.takeReportList=res.data
  381. } else {
  382. that.$message({
  383. message: res.msg,
  384. type: 'error'
  385. });
  386. }
  387. }
  388. })
  389. },
  390. gethandle(){
  391. var that=this;
  392. $.ajax({
  393. url:this.base_url+ '/gateway/query/type/handle_Type',
  394. type: 'GET',
  395. data: {},
  396. dataType: 'json',
  397. success: function(res) {
  398. if (res.code == 200) {
  399. that.handleList=res.data
  400. } else {
  401. that.$message({
  402. message: res.msg,
  403. type: 'error'
  404. });
  405. }
  406. }
  407. })
  408. },
  409. getDicFn(idx,e){
  410. if(idx==0){
  411. this.testItems=e.dictLabel
  412. this.form.testItems=e.dictValue;
  413. }else{
  414. this.provideType=e.dictLabel
  415. this.form.provideType=e.dictValue;
  416. }
  417. },
  418. // 取报告方式
  419. getDicFns(idx,e){
  420. if(idx==0){
  421. this.takeReportType=e.dictLabel
  422. this.form.takeReportType=e.dictValue;
  423. // 判断是邮寄
  424. if(e.dictValue==1){
  425. this.adrflag=true
  426. }else{
  427. this.adrflag=false;
  428. }
  429. }else{
  430. this.handleType=e.dictLabel
  431. this.form.handleType=e.dictValue;
  432. }
  433. },
  434. rangeMove(e){
  435. let ele = e.target;
  436. let startX = e.clientX;
  437. let eleWidth = ele.offsetWidth;
  438. let parentWidth = ele.parentElement.offsetWidth;
  439. let MaxX = parentWidth - eleWidth;
  440. if(this.rangeStatus){//不运行
  441. return false;
  442. }
  443. document.onmousemove = (e) => {
  444. let endX = e.clientX;
  445. this.disX = endX - startX;
  446. if(this.disX<=0){
  447. this.disX = 0;
  448. }
  449. if(this.disX>=MaxX-eleWidth){//减去滑块的宽度,体验效果更好
  450. this.disX = MaxX;
  451. }
  452. ele.style.transition = '.1s all';
  453. ele.style.transform = 'translateX('+this.disX+'px)';
  454. e.preventDefault();
  455. }
  456. document.onmouseup = ()=> {
  457. if(this.disX !== MaxX){
  458. ele.style.transition = '.5s all';
  459. ele.style.transform = 'translateX(0)';
  460. //执行成功的函数
  461. this.errorFun && this.errorFun();
  462. }else{
  463. this.rangeStatus = true;
  464. if(this.status){
  465. this.$parent[this.status] = true;
  466. }
  467. //执行成功的函数
  468. // this.successFun && this.successFun();
  469. }
  470. document.onmousemove = null;
  471. document.onmouseup = null;
  472. }
  473. },
  474. successFun(){
  475. },
  476. getDarg(){
  477. var that=this;
  478. if(this.rangeStatus){
  479. this.dialogVisible=false;
  480. this.rangeStatus=false;
  481. this.disX=0;
  482. $.ajax({
  483. url:this.base_url+ '/gateway/query/sendInspectInFor',
  484. type: 'POST',
  485. data: this.form,
  486. dataType: 'json',
  487. success: function(res) {
  488. if (res.code == 200) {
  489. that.$message.success('提交成功');
  490. that.resertFoem()
  491. // that.setTimein()
  492. } else {
  493. that.$message({
  494. message: res.msg,
  495. type: 'error'
  496. });
  497. }
  498. }
  499. })
  500. }else{
  501. that.$message.error('请先验证');
  502. }
  503. },
  504. getSubmit(){
  505. var that=this;
  506. var myreg=/^[1][3,4,5,7,8,9][0-9]{9}$/;
  507. if(!this.form.sampleName){
  508. this.$message.error("请输入样品名称");
  509. return
  510. }
  511. if(!this.form.sampleNum){
  512. this.$message.error("请输入样品数量");
  513. return
  514. }
  515. if(!this.form.normsModel){
  516. this.$message.error("请输入规格型号");
  517. return
  518. }
  519. if(!this.form.testItems){
  520. this.$message.error("请选择检验项目");
  521. return
  522. }
  523. if(!this.form.provideType){
  524. this.$message.error("请选择提供方式");
  525. return
  526. }
  527. if(!this.form.takeReportType){
  528. this.$message.error("请选择取报告方式");
  529. return
  530. }
  531. if(this.form.takeReportType==1){
  532. if(!this.form.takeName){
  533. this.$message.error("请输入收件人姓名");
  534. return
  535. }
  536. if(!this.form.takePhone||this.form.takePhone.length!=11||!myreg.test(this.form.takePhone)){
  537. this.$message.error("请输入正确的收件人手机号");
  538. return
  539. }
  540. if(!this.form.takeAddress){
  541. this.$message.error("请输入收件人地址");
  542. return
  543. }
  544. }else{
  545. this.form.takeName=''
  546. this.form.takePhone=''
  547. this.form.takeAddress=''
  548. }
  549. if(!this.form.handleType){
  550. this.$message.error("请选择样品处理方式");
  551. return
  552. }
  553. if(!this.form.manufacturerName){
  554. this.$message.error("请输入送检单位名称");
  555. return
  556. }
  557. if(!this.form.manufacturerPhone||this.form.manufacturerPhone.length!=11||!myreg.test(this.form.manufacturerPhone)){
  558. this.$message.error("请输入正确的送检单位电话");
  559. return
  560. }
  561. if(!this.form.inspectedName){
  562. this.$message.error("请输入委托单位名称");
  563. return
  564. }
  565. if(!this.form.inspectedPhone||this.form.inspectedPhone.length!=11||!myreg.test(this.form.inspectedPhone)){
  566. this.$message.error("请输入正确委托单位电话");
  567. return
  568. }
  569. this.rangeStatus=false;
  570. this.disX=0;
  571. this.dialogVisible=true
  572. },
  573. resertFoem(){
  574. this.form={
  575. "sampleName":"",//样品名称
  576. "sampleNum":"",//样品数量
  577. "normsModel":"",//规格型号
  578. "testItems":"",//检验项目
  579. "provideType":"",//提供方式
  580. "manufacturerName":"",//生产单位名称
  581. "manufacturerPhone":"",//生产单位电话
  582. "inspectedName":"",//受检单位名称
  583. "inspectedPhone":"",//受检单位电话
  584. "remark":"",
  585. "takeReportType":"",//取报告方式
  586. "handleType":"",//样品处理方式
  587. "takeName":'',//收件人姓名
  588. "takePhone":'',//收件人手机号
  589. "takeAddress":'',//收件人地址
  590. }
  591. this.testItems=''
  592. this.provideType=''
  593. this.takeReportType=''
  594. this.handleType=''
  595. this.adrflag=false;
  596. },
  597. inpubie() {
  598. console.log(this.inpute)
  599. },
  600. nhyesee() {
  601. console.log(this.inpute)
  602. },
  603. tabcl(index, val) {
  604. this.nue = index
  605. if (val == 1) {
  606. this.ulrw = index.html
  607. } else {
  608. this.ulrw = 'djdt.html?id=' + val
  609. }
  610. // console.log(index, val)
  611. },
  612. jeuese(index) {
  613. if (index == 1) {
  614. this.ulrw = index.html
  615. } else {
  616. this.ulrw = 'djdt.html?id=' + index
  617. }
  618. },
  619. }
  620. })
  621. </script>
  622. </html>