wshsj.html 20 KB

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