inputSample.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352
  1. <template>
  2. <div>
  3. <!-- <el-card class="box-card" style="height: 100%;">
  4. -->
  5. <!-- <div slot="header" class="clearfix"> -->
  6. <el-breadcrumb separator-class="el-icon-arrow-right">
  7. <el-breadcrumb-item>首页</el-breadcrumb-item>
  8. <!-- <el-breadcrumb-item :to="{ path: '/jc/setTaskcd'}">例行检测</el-breadcrumb-item> -->
  9. <!-- <el-breadcrumb-item>承担单位</el-breadcrumb-item>
  10. <el-breadcrumb-item :to="{ path: '/jc/routineMonitor' }">例行检测</el-breadcrumb-item>
  11. <el-breadcrumb-item>执行任务</el-breadcrumb-item>
  12. :to="{ path: '/jc/setTaskcd' }"
  13. <el-breadcrumb-item>抽样</el-breadcrumb-item> -->
  14. <el-breadcrumb-item>填报抽样单</el-breadcrumb-item>
  15. </el-breadcrumb>
  16. <!-- <el-descriptions-item label="联系地址" :contentStyle="{'text-align': 'right'}">
  17. 江苏省苏州市吴中区吴中大道 1188 号
  18. </el-descriptions-item> -->
  19. <el-descriptions title="农产品质量安全抽样单" :column="2" border style="margin-top:20px" :contentStyle="{'text-align': left}">
  20. <el-descriptions-item label="*样品名称" prop="cyd_data.sample_name" class="labelItem" size="mini" required >
  21. <!-- <el-col :span="12"> -->
  22. <el-select v-model="cyd_data.sample_name" clearable style="width:60%">
  23. <el-option v-for="item in sampleList"
  24. :key="item.product_id"
  25. :label="item.product_name"
  26. :value="item.product_name">
  27. </el-option>
  28. </el-select>
  29. <!-- </el-col> -->
  30. </el-descriptions-item>
  31. <el-descriptions-item label="样品编码" prop="cyd_data.sample_id" class="labelItem" style="" size="mini">
  32. <el-input v-model="cyd_data.sample_id" disabled>
  33. <el-button slot="append" @click="createCode">生成</el-button>
  34. </el-input>
  35. </el-descriptions-item>
  36. <el-descriptions-item label="商标" prop="cyd_data.brand" class="labelItem" size="mini">
  37. <el-input v-model="cyd_data.brand"></el-input>
  38. </el-descriptions-item>
  39. <el-descriptions-item label="包装" prop="cyd_data.ispack" class="labelItem" style="" size="mini">
  40. <el-radio v-model="cyd_data.ispack" label="有">有</el-radio>
  41. <el-radio v-model="cyd_data.ispack" label="无">无</el-radio>
  42. </el-descriptions-item>
  43. <el-descriptions-item label="型号规格" prop="cyd_data.type" class="labelItem" size="mini">
  44. <el-input v-model="cyd_data.type"></el-input>
  45. </el-descriptions-item>
  46. <el-descriptions-item label="执行标准" prop="cyd_data.standard" class="labelItem" style="" size="mini">
  47. <el-input v-model="cyd_data.standard"></el-input>
  48. </el-descriptions-item>
  49. <el-descriptions-item label="*生产日期或批号" prop="cyd_data.production_date" class="labelItem" size="mini" required>
  50. <el-input v-model="cyd_data.production_date"></el-input>
  51. </el-descriptions-item>
  52. <el-descriptions-item label="产地" prop="cyd_data.place" class="labelItem" style="" size="mini">
  53. <el-cascader :options="options" v-model="selectedOptions" @change="handleChange" style="width:60%"></el-cascader>
  54. </el-descriptions-item>
  55. <el-descriptions-item label="*产品认证情况" prop="cyd_data.certicfie" class="labelItem" size="mini" required>
  56. <el-radio v-model="cyd_data.certicfie" label="无公害农产品">无公害农产品</el-radio>
  57. <el-radio v-model="cyd_data.certicfie" label="绿色食品">绿色食品</el-radio>
  58. <el-radio v-model="cyd_data.certicfie" label="有机食品">有机食品</el-radio>
  59. <el-radio v-model="cyd_data.certicfie" label="其他">其他</el-radio>
  60. </el-descriptions-item>
  61. <el-descriptions-item label="证书编号" prop="cyd_data.certifie_num" class="labelItem" style="" size="mini">
  62. <el-input v-model="cyd_data.certifie_num"></el-input>
  63. </el-descriptions-item>
  64. <el-descriptions-item label="*抽样数量" prop="cyd_data.sample_num" class="labelItem" size="mini" required>
  65. <el-input v-model="cyd_data.sample_num" style="width:180px"></el-input>
  66. <a> * 单位 </a><el-input v-model="cyd_data.sample_num_unit" clearable="true" style="width:180px"></el-input>
  67. </el-descriptions-item>
  68. <el-descriptions-item label="抽样基数" prop="cyd_data.sample_base" class="labelItem" size="mini" required>
  69. <el-input v-model="cyd_data.sample_base" style="width:180px"></el-input>
  70. <a> * 单位 </a><el-input v-model="cyd_data.sample_base_unit" clearable="true" style="width:180px"></el-input>
  71. </el-descriptions-item>
  72. <el-descriptions-item label="*抽样场所" prop="cyd_data.sample_ground" class="labelItem" size="mini" required >
  73. <el-radio v-model="cyd_data.sample_ground" label="生产基地/企业">生产基地/企业</el-radio>
  74. <el-radio v-model="cyd_data.sample_ground" label="屠宰场">屠宰场</el-radio>
  75. <el-radio v-model="cyd_data.sample_ground" label="农贸市场">农贸市场</el-radio>
  76. <el-radio v-model="cyd_data.sample_ground" label="批发市场">批发市场</el-radio>
  77. <el-radio v-model="cyd_data.sample_ground" label="超市">超市</el-radio>
  78. <el-radio v-model="cyd_data.sample_ground" label="其他">其他</el-radio>
  79. </el-descriptions-item>
  80. </el-descriptions>
  81. <!-- 受检单位情况 -->
  82. <el-descriptions :column="1" border style="" >
  83. <el-descriptions-item label="受检单位情况" >
  84. <el-descriptions :column="1" border size="mini" style="width:100%">
  85. <el-descriptions-item label="*单位名称" prop="unit_test.unit_name" class="labelItem" style="" size="mini" required>
  86. <el-input v-model="unit_test.unit_name"></el-input>
  87. </el-descriptions-item>
  88. <el-descriptions-item label="*法定代表人" prop="unit_test.represent_name" class="labelItem" style="" size="mini" required>
  89. <el-input v-model="unit_test.represent_name"></el-input>
  90. </el-descriptions-item>
  91. <el-descriptions-item label="*受检人" prop="unit_test.user_name" class="labelItem" style="" size="mini" required>
  92. <el-input v-model="unit_test.user_name"></el-input>
  93. </el-descriptions-item>
  94. <el-descriptions-item label="*联系电话" prop="unit_test.phone" class="labelItem" style="" size="mini" required>
  95. <el-input v-model="unit_test.phone"></el-input>
  96. </el-descriptions-item>
  97. <el-descriptions-item label="*通讯地址" prop="unit_test.address" class="labelItem" style="" size="mini" required>
  98. <el-input v-model="unit_test.address"></el-input>
  99. </el-descriptions-item>
  100. <el-descriptions-item label="传真" prop="unit_test.fax" class="labelItem" style="" size="mini">
  101. <el-input v-model="unit_test.fax"></el-input>
  102. </el-descriptions-item>
  103. </el-descriptions>
  104. </el-descriptions-item>
  105. </el-descriptions>
  106. <!-- 生产单位情况 -->
  107. <el-descriptions :column="1" border style="" >
  108. <el-descriptions-item label="生产单位情况" >
  109. <el-descriptions :column="1" border size="mini" style="width:100%" >
  110. <el-descriptions-item label="*单位名称" prop="unit_production.production_name" class="labelItem" style="" size="mini" required>
  111. <el-input v-model="unit_production.production_name"></el-input>
  112. </el-descriptions-item>
  113. <el-descriptions-item label="*联系人" prop="unit_production.user_name" class="labelItem" style="" size="mini" required>
  114. <el-input v-model="unit_production.user_name"></el-input>
  115. </el-descriptions-item>
  116. <el-descriptions-item label="*联系电话" prop="unit_production.phone" class="labelItem" style="" size="mini" required>
  117. <el-input v-model="unit_production.phone"></el-input>
  118. </el-descriptions-item>
  119. <el-descriptions-item label="*通讯地址" prop="unit_production.address" class="labelItem" style="" size="mini" required>
  120. <el-input v-model="unit_production.address"></el-input>
  121. </el-descriptions-item>
  122. <el-descriptions-item label="邮编" prop="unit_production.postcode" class="labelItem" style="" size="mini">
  123. <el-input v-model="unit_production.postcode"></el-input>
  124. </el-descriptions-item>
  125. <el-descriptions-item label="传真" prop="unit_production.fax" class="labelItem" style="" size="mini">
  126. <el-input v-model="unit_production.fax"></el-input>
  127. </el-descriptions-item>
  128. <el-descriptions-item label="生产方式" prop="unit_production.production_class" class="labelItem" style="" required>
  129. <el-radio v-model="unit_production.production_class" label="自产">自产</el-radio>
  130. <el-radio v-model="unit_production.production_class" label="收购">收购</el-radio>
  131. </el-descriptions-item>
  132. </el-descriptions>
  133. </el-descriptions-item>
  134. </el-descriptions>
  135. <!-- 抽样单位情况 -->
  136. <el-descriptions :column="1" border style="">
  137. <el-descriptions-item label="抽样单位情况">
  138. <el-descriptions :column="1" border size="mini" style="width:100%">
  139. <el-descriptions-item label="*单位名称" prop="unit_sample.unit_name" class="labelItem" style="" size="mini" required>
  140. <el-input v-model="unit_sample.unit_name" disabled></el-input>
  141. </el-descriptions-item>
  142. <el-descriptions-item label="*联系人" prop="unit_sample.unit_user" class="labelItem" style="" size="mini" required>
  143. <el-input v-model="unit_sample.unit_user"></el-input>
  144. </el-descriptions-item>
  145. <el-descriptions-item label="*联系电话" prop="unit_sample.phone" class="labelItem" style="" size="mini" required>
  146. <el-input v-model="unit_sample.phone"></el-input>
  147. </el-descriptions-item>
  148. <el-descriptions-item label="*通讯地址" prop="unit_sample.address" class="labelItem" style="" size="mini" required>
  149. <el-input v-model="unit_sample.address"></el-input>
  150. </el-descriptions-item>
  151. <el-descriptions-item label="邮编" prop="unit_sample.postcode" class="labelItem" style="" size="mini">
  152. <el-input v-model="unit_sample.postcode"></el-input>
  153. </el-descriptions-item>
  154. <el-descriptions-item label="传真" prop="unit_sample.fax" class="labelItem" style="" size="mini">
  155. <el-input v-model="unit_sample.fax"></el-input>
  156. </el-descriptions-item>
  157. <el-descriptions-item label="Email" prop="unit_sample.email" class="labelItem" style="" size="mini">
  158. <el-input v-model="unit_sample.email"></el-input>
  159. </el-descriptions-item>
  160. </el-descriptions>
  161. </el-descriptions-item>
  162. </el-descriptions>
  163. <el-descriptions :column="2" border>
  164. <el-descriptions-item label="检测任务依据" prop="cyd_data.base" class="labelItem" style="" size="mini" required>
  165. <el-input v-model="cyd_data.base"></el-input>
  166. </el-descriptions-item>
  167. <el-descriptions-item label="抽样时间" prop="cyd_data.sample_date" class="labelItem" style="" size="mini" required>
  168. <el-date-picker v-model="cyd_data.sample_date" type="date" value-format="yyyy-MM-dd">
  169. </el-date-picker>
  170. </el-descriptions-item>
  171. <el-descriptions-item label="被抽检单位签字盖章附件" prop="cyd_data.file_url" class="labelItem" style="" size="mini">
  172. <el-upload class="upload-demo" :file-list="fileList" drag :headers="myHeaders"
  173. action="http://syjcapi.aielab.net/api/v1/ossUpload" :on-success="uploadSuccess" :limit="1">
  174. <i class="el-icon-upload"></i>
  175. <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
  176. </el-upload>
  177. </el-descriptions-item>
  178. </el-descriptions>
  179. <!-- 底部按钮 -->
  180. <el-form>
  181. <el-form-item class="btn">
  182. <el-button type="primary" @click="back()">返回任务详情</el-button>
  183. <el-button @click="resetForm()">重置</el-button>
  184. <el-button @click="onSubmit">保存,继续添加</el-button>
  185. </el-form-item>
  186. </el-form>
  187. <!-- <el-form ref="form1" :model="form" label-width="110px"
  188. style="margin-top: 20px;width: 48%;background-color: aliceblue;padding:10px 1px 1px 10px;">
  189. </el-form> -->
  190. </div>
  191. <!-- </el-card> -->
  192. </template>
  193. <script>
  194. const token = window.sessionStorage.getItem('token')
  195. import {
  196. provinceAndCityData,
  197. regionData,
  198. provinceAndCityDataPlus,
  199. regionDataPlus,
  200. CodeToText,
  201. TextToCode
  202. } from 'element-china-area-data'
  203. export default {
  204. name: 'inputSample',
  205. data() {
  206. return {
  207. myHeaders: {
  208. Authorization: 'bearer' + token
  209. },
  210. fileList: [],
  211. form: {},
  212. cyd_data: {},//抽样单信息上部分
  213. unit_test: {},//受检单位信息
  214. unit_production: {},//生产单位信息
  215. unit_sample: {},//抽样单位信息
  216. units: [],
  217. production: [],
  218. // 样品下拉框
  219. sampleList: [],
  220. task_id: '',
  221. undertake_id: '',
  222. // 产地
  223. options: regionData,
  224. selectedOptions: []
  225. }
  226. },
  227. created() {
  228. this.task_id = this.$route.params.task_id
  229. this.undertake_id = this.$route.params.under_id
  230. console.log(this.task_id)
  231. console.log(this.undertake_id)
  232. this.getTestObj()
  233. },
  234. methods: {
  235. // 获取样本列表
  236. async getTestObj() {
  237. const result = await this.$http.post('getTestObj', {
  238. task_id: this.task_id,
  239. undertake_id: this.undertake_id
  240. })
  241. console.log(result.data.data.sample_info.name)
  242. if (result.data.code == 0) {
  243. this.sampleList = result.data.data.list
  244. this.unit_sample.unit_name = result.data.data.sample_info.name
  245. }
  246. console.log(this.unit_sample.unit_name)
  247. },
  248. // 生成样品编码
  249. async createCode() {
  250. var that = this
  251. const result = await this.$http.post('getSampleId', {
  252. task_id: this.task_id
  253. })
  254. console.log(result.data.data.id)
  255. if (result.data.code == 0) {
  256. that.cyd_data.sample_id = result.data.data.id
  257. this.getTestObj()
  258. }
  259. },
  260. // 获取选择产地
  261. handleChange() {
  262. var that = this
  263. var loc = "";
  264. // console.log(this.form.place)
  265. for (let i = 0; i < this.selectedOptions.length; i++) {
  266. loc += CodeToText[this.selectedOptions[i]];
  267. }
  268. // console.log(loc)
  269. that.cyd_data.place = loc
  270. console.log(that.cyd_data.place)
  271. },
  272. // 上传成功(要确认数据)
  273. uploadSuccess(res) {
  274. console.log(res.data)
  275. this.cyd_data.file_url = res.data.fileUrl
  276. this.cyd_data.file_name = res.data.fileName
  277. },
  278. async onSubmit() {
  279. console.log(this.cyd_data.sample_name)
  280. var that = this
  281. console.log(that.cyd_data)
  282. that.cyd_data.task_id = that.task_id
  283. that.cyd_data.undertake_id = that.undertake_id
  284. that.form.cyd_data = that.cyd_data
  285. that.form.unit_test = that.unit_test
  286. that.form.unit_production = that.unit_production
  287. that.form.unit_sample = that.unit_sample
  288. console.log(that.form)
  289. const result = await this.$http.post('saveSample', this.form)
  290. if (result.data.code == 0) {
  291. // that.form.sample_id = result.data.data.id
  292. this.$message({
  293. type: 'success',
  294. message: '提交抽样单成功!'
  295. });
  296. }
  297. },
  298. // 重置表单
  299. resetForm() {
  300. // console.log(this.form)
  301. this.cyd_data = '';
  302. this.unit_test = '';
  303. this.unit_production = '';
  304. this.unit_sample = '';
  305. this.selectedOptions = '';
  306. },
  307. // 返回
  308. back() {
  309. var that = this
  310. console.log(that.task_id)
  311. this.$router.push({
  312. name: 'setTaskcd',
  313. params: {
  314. id: that.task_id
  315. }
  316. })
  317. }
  318. },
  319. }
  320. </script>
  321. <style lang="less" scoped>
  322. .form {
  323. display: flex;
  324. flex-direction: row;
  325. justify-content: center;
  326. align-content: flex-start;
  327. }
  328. .el-descriptions {
  329. width: 80%;
  330. margin: auto;
  331. }
  332. /deep/ .el-descriptions__title {
  333. margin: auto;
  334. font-size: 1.25rem;
  335. // font-weight: 31.25rem !important;
  336. }
  337. .btn{
  338. margin-top:20px ;
  339. // float: right;
  340. text-align: center;
  341. }
  342. </style>