wshsj.html 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636
  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 type="text/javascript" src="./static/js/vue.js"></script>
  16. <script type="text/javascript" src="./static/js/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="static/css/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. while (elem) {
  248. 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') {
  249. return;
  250. }
  251. elem = elem.parentNode;
  252. }
  253. if ($('.pw_selecta').is(':visible') ) {
  254. $('.pw_selecta').hide();
  255. $(".pw_listb").removeClass('act')
  256. }
  257. })
  258. $(".pw_select").click(function(){
  259. if($(this).find(".pw_selecta").is(":hidden")){
  260. $(".pw_selecta").hide();
  261. $(".pw_listb").removeClass('act')
  262. $(this).find(".pw_selecta").show()
  263. $(this).find(".pw_listb").addClass('act')
  264. }else{
  265. $(this).find(".pw_selecta").hide()
  266. $(this).find(".pw_listb").removeClass('act')
  267. }
  268. })
  269. });
  270. </script>
  271. <!-- <script src="static/js/script.js"></script> -->
  272. <script src="static/js/custom.js"></script>
  273. <script type="text/javascript" src="static/js/header.js"></script>
  274. <script type="text/jscript">
  275. var app=new Vue({
  276. el:'#app',
  277. data:{
  278. inpute: '',
  279. tablide: [],
  280. hyew: false,
  281. nue: "首页",
  282. week: '',
  283. date_show: '',
  284. ulrw: '',
  285. mjuede: '',
  286. tyer: {
  287. type: 0
  288. },
  289. form:{
  290. "sampleName":"",//样品名称
  291. "sampleNum":"",//样品数量
  292. "normsModel":"",//规格型号
  293. "testItems":"",//检验项目
  294. "provideType":"",//提供方式
  295. "manufacturerName":"",//生产单位名称
  296. "manufacturerPhone":"",//生产单位电话
  297. "inspectedName":"",//受检单位名称
  298. "inspectedPhone":"",//受检单位电话
  299. "remark":"",
  300. "takeReportType":"",//取报告方式
  301. "handleType":"",//样品处理方式
  302. "takeName":'',//收件人姓名
  303. "takePhone":'',//收件人手机号
  304. "takeAddress":'',//收件人地址
  305. },
  306. base_url:'https://jyzx.qs163.cn/prod-api',
  307. // base_url:'http://192.168.101.11:8090',
  308. labelPosition: 'top',
  309. inspectlist:[],
  310. provisionList:[],
  311. takeReportList:[],
  312. handleList:[],
  313. testItems:'',
  314. provideType:'',
  315. takeReportType:'',
  316. handleType:'',//样品处理方式
  317. disX : 0,
  318. rangeStatus: false,
  319. successText:'验证成功',
  320. startText:'请拖住滑块,拖动到最右边',
  321. dialogVisible:false,
  322. adrflag:false,
  323. },
  324. created(){
  325. this.getInspect();
  326. this.getprovision();
  327. this.gettakeReport();
  328. this.gethandle();
  329. },
  330. methods:{
  331. // //获取字典值
  332. getInspect(){
  333. var that=this;
  334. $.ajax({
  335. url:this.base_url+ '/gateway/query/type/inspection_item',
  336. type: 'GET',
  337. data: {},
  338. dataType: 'json',
  339. success: function(res) {
  340. if (res.code == 200) {
  341. that.inspectlist=res.data
  342. } else {
  343. that.$message({
  344. message: res.msg,
  345. type: 'error'
  346. });
  347. }
  348. }
  349. })
  350. },
  351. getprovision(){
  352. var that=this;
  353. $.ajax({
  354. url:this.base_url+ '/gateway/query/type/provision_mode',
  355. type: 'GET',
  356. data: {},
  357. dataType: 'json',
  358. success: function(res) {
  359. if (res.code == 200) {
  360. that.provisionList=res.data
  361. } else {
  362. that.$message({
  363. message: res.msg,
  364. type: 'error'
  365. });
  366. }
  367. }
  368. })
  369. },
  370. gettakeReport(){
  371. var that=this;
  372. $.ajax({
  373. url:this.base_url+ '/gateway/query/type/takeReport_type',
  374. type: 'GET',
  375. data: {},
  376. dataType: 'json',
  377. success: function(res) {
  378. if (res.code == 200) {
  379. that.takeReportList=res.data
  380. } else {
  381. that.$message({
  382. message: res.msg,
  383. type: 'error'
  384. });
  385. }
  386. }
  387. })
  388. },
  389. gethandle(){
  390. var that=this;
  391. $.ajax({
  392. url:this.base_url+ '/gateway/query/type/handle_Type',
  393. type: 'GET',
  394. data: {},
  395. dataType: 'json',
  396. success: function(res) {
  397. if (res.code == 200) {
  398. that.handleList=res.data
  399. } else {
  400. that.$message({
  401. message: res.msg,
  402. type: 'error'
  403. });
  404. }
  405. }
  406. })
  407. },
  408. getDicFn(idx,e){
  409. if(idx==0){
  410. this.testItems=e.dictLabel
  411. this.form.testItems=e.dictValue;
  412. }else{
  413. this.provideType=e.dictLabel
  414. this.form.provideType=e.dictValue;
  415. }
  416. },
  417. // 取报告方式
  418. getDicFns(idx,e){
  419. if(idx==0){
  420. this.takeReportType=e.dictLabel
  421. this.form.takeReportType=e.dictValue;
  422. // 判断是邮寄
  423. if(e.dictValue==1){
  424. this.adrflag=true
  425. }else{
  426. this.adrflag=false;
  427. }
  428. }else{
  429. this.handleType=e.dictLabel
  430. this.form.handleType=e.dictValue;
  431. }
  432. },
  433. rangeMove(e){
  434. let ele = e.target;
  435. let startX = e.clientX;
  436. let eleWidth = ele.offsetWidth;
  437. let parentWidth = ele.parentElement.offsetWidth;
  438. let MaxX = parentWidth - eleWidth;
  439. if(this.rangeStatus){//不运行
  440. return false;
  441. }
  442. document.onmousemove = (e) => {
  443. let endX = e.clientX;
  444. this.disX = endX - startX;
  445. if(this.disX<=0){
  446. this.disX = 0;
  447. }
  448. if(this.disX>=MaxX-eleWidth){//减去滑块的宽度,体验效果更好
  449. this.disX = MaxX;
  450. }
  451. ele.style.transition = '.1s all';
  452. ele.style.transform = 'translateX('+this.disX+'px)';
  453. e.preventDefault();
  454. }
  455. document.onmouseup = ()=> {
  456. if(this.disX !== MaxX){
  457. ele.style.transition = '.5s all';
  458. ele.style.transform = 'translateX(0)';
  459. //执行成功的函数
  460. this.errorFun && this.errorFun();
  461. }else{
  462. this.rangeStatus = true;
  463. if(this.status){
  464. this.$parent[this.status] = true;
  465. }
  466. //执行成功的函数
  467. // this.successFun && this.successFun();
  468. }
  469. document.onmousemove = null;
  470. document.onmouseup = null;
  471. }
  472. },
  473. successFun(){
  474. },
  475. getDarg(){
  476. var that=this;
  477. if(this.rangeStatus){
  478. this.dialogVisible=false;
  479. this.rangeStatus=false;
  480. this.disX=0;
  481. $.ajax({
  482. url:this.base_url+ '/gateway/query/sendInspectInFor',
  483. type: 'POST',
  484. data: this.form,
  485. dataType: 'json',
  486. success: function(res) {
  487. if (res.code == 200) {
  488. that.$message.success('提交成功');
  489. that.resertFoem()
  490. // that.setTimein()
  491. } else {
  492. that.$message({
  493. message: res.msg,
  494. type: 'error'
  495. });
  496. }
  497. }
  498. })
  499. }else{
  500. that.$message.error('请先验证');
  501. }
  502. },
  503. getSubmit(){
  504. var that=this;
  505. var myreg=/^[1][3,4,5,7,8,9][0-9]{9}$/;
  506. if(!this.form.sampleName){
  507. this.$message.error("请输入样品名称");
  508. return
  509. }
  510. if(!this.form.sampleNum){
  511. this.$message.error("请输入样品数量");
  512. return
  513. }
  514. if(!this.form.normsModel){
  515. this.$message.error("请输入规格型号");
  516. return
  517. }
  518. if(!this.form.testItems){
  519. this.$message.error("请选择检验项目");
  520. return
  521. }
  522. if(!this.form.provideType){
  523. this.$message.error("请选择提供方式");
  524. return
  525. }
  526. if(!this.form.takeReportType){
  527. this.$message.error("请选择取报告方式");
  528. return
  529. }
  530. if(this.form.takeReportType==1){
  531. if(!this.form.takeName){
  532. this.$message.error("请输入收件人姓名");
  533. return
  534. }
  535. if(!this.form.takePhone||this.form.takePhone.length!=11||!myreg.test(this.form.takePhone)){
  536. this.$message.error("请输入正确的收件人手机号");
  537. return
  538. }
  539. if(!this.form.takeAddress){
  540. this.$message.error("请输入收件人地址");
  541. return
  542. }
  543. }else{
  544. this.form.takeName=''
  545. this.form.takePhone=''
  546. this.form.takeAddress=''
  547. }
  548. if(!this.form.handleType){
  549. this.$message.error("请选择样品处理方式");
  550. return
  551. }
  552. if(!this.form.manufacturerName){
  553. this.$message.error("请输入送检单位名称");
  554. return
  555. }
  556. if(!this.form.manufacturerPhone||this.form.manufacturerPhone.length!=11||!myreg.test(this.form.manufacturerPhone)){
  557. this.$message.error("请输入正确的送检单位电话");
  558. return
  559. }
  560. if(!this.form.inspectedName){
  561. this.$message.error("请输入委托单位名称");
  562. return
  563. }
  564. if(!this.form.inspectedPhone||this.form.inspectedPhone.length!=11||!myreg.test(this.form.inspectedPhone)){
  565. this.$message.error("请输入正确委托单位电话");
  566. return
  567. }
  568. this.rangeStatus=false;
  569. this.disX=0;
  570. this.dialogVisible=true
  571. },
  572. resertFoem(){
  573. this.form={
  574. "sampleName":"",//样品名称
  575. "sampleNum":"",//样品数量
  576. "normsModel":"",//规格型号
  577. "testItems":"",//检验项目
  578. "provideType":"",//提供方式
  579. "manufacturerName":"",//生产单位名称
  580. "manufacturerPhone":"",//生产单位电话
  581. "inspectedName":"",//受检单位名称
  582. "inspectedPhone":"",//受检单位电话
  583. "remark":"",
  584. "takeReportType":"",//取报告方式
  585. "handleType":"",//样品处理方式
  586. "takeName":'',//收件人姓名
  587. "takePhone":'',//收件人手机号
  588. "takeAddress":'',//收件人地址
  589. }
  590. this.testItems=''
  591. this.provideType=''
  592. this.takeReportType=''
  593. this.handleType=''
  594. this.adrflag=false;
  595. },
  596. inpubie() {
  597. console.log(this.inpute)
  598. },
  599. nhyesee() {
  600. console.log(this.inpute)
  601. },
  602. tabcl(index, val) {
  603. this.nue = index
  604. if (val == 1) {
  605. this.ulrw = index.html
  606. } else {
  607. this.ulrw = 'djdt.html?id=' + val
  608. }
  609. // console.log(index, val)
  610. },
  611. jeuese(index) {
  612. if (index == 1) {
  613. this.ulrw = index.html
  614. } else {
  615. this.ulrw = 'djdt.html?id=' + index
  616. }
  617. },
  618. }
  619. })
  620. </script>
  621. </html>