sampleReport.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363
  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. <div id="sampleReport">
  20. <el-descriptions title="农产品质量安全抽样单" :column="2" border style="margin-top:20px">
  21. <el-descriptions-item label="*抽样单编号" prop="cyd_data.cyd_code" style="width:200px" class="labelItem" size="mini" required >
  22. {{cyd_data.cyd_code}}
  23. </el-descriptions-item>
  24. <!-- <el-descriptions-item label="样品编码" prop="cyd_data.sample_id" class="labelItem" style="" size="mini">
  25. <el-input v-model="cyd_data.sample_id" disabled>
  26. <el-button slot="append" @click="createCode">生成</el-button>
  27. </el-input>
  28. </el-descriptions-item>
  29. <el-descriptions-item label="商标" prop="cyd_data.brand" class="labelItem" size="mini">
  30. <el-input v-model="cyd_data.brand"></el-input>
  31. </el-descriptions-item>
  32. <el-descriptions-item label="包装" prop="cyd_data.ispack" class="labelItem" style="" size="mini">
  33. <el-radio v-model="cyd_data.ispack" label="有">有</el-radio>
  34. <el-radio v-model="cyd_data.ispack" label="无">无</el-radio>
  35. </el-descriptions-item>
  36. <el-descriptions-item label="型号规格" prop="cyd_data.type" class="labelItem" size="mini">
  37. <el-input v-model="cyd_data.type"></el-input>
  38. </el-descriptions-item>
  39. <el-descriptions-item label="执行标准" prop="cyd_data.standard" class="labelItem" style="" size="mini">
  40. <el-input v-model="cyd_data.standard"></el-input>
  41. </el-descriptions-item>
  42. <el-descriptions-item label="*生产日期或批号" prop="cyd_data.production_date" class="labelItem" size="mini" required>
  43. <el-input v-model="cyd_data.production_date"></el-input>
  44. </el-descriptions-item>
  45. <el-descriptions-item label="产地" prop="cyd_data.place" class="labelItem" style="" size="mini">
  46. <el-cascader :options="options" v-model="selectedOptions" @change="handleChange" style="width:60%"></el-cascader>
  47. </el-descriptions-item>
  48. <el-descriptions-item label="*产品认证情况" prop="cyd_data.certicfie" class="labelItem" size="mini" required>
  49. <el-radio v-model="cyd_data.certicfie" label="无公害农产品">无公害农产品</el-radio>
  50. <el-radio v-model="cyd_data.certicfie" label="绿色食品">绿色食品</el-radio>
  51. <el-radio v-model="cyd_data.certicfie" label="有机食品">有机食品</el-radio>
  52. <el-radio v-model="cyd_data.certicfie" label="其他">其他</el-radio>
  53. </el-descriptions-item>
  54. <el-descriptions-item label="证书编号" prop="cyd_data.certifie_num" class="labelItem" style="" size="mini">
  55. <el-input v-model="cyd_data.certifie_num"></el-input>
  56. </el-descriptions-item>
  57. <el-descriptions-item label="*抽样数量" prop="cyd_data.sample_num" class="labelItem" size="mini" required>
  58. <el-input v-model="cyd_data.sample_num" style="width:180px"></el-input>
  59. <a> * 单位 </a><el-input v-model="cyd_data.sample_num_unit" clearable="true" style="width:180px"></el-input>
  60. </el-descriptions-item>
  61. <el-descriptions-item label="抽样基数" prop="cyd_data.sample_base" class="labelItem" size="mini" required>
  62. <el-input v-model="cyd_data.sample_base" style="width:180px"></el-input>
  63. <a> * 单位 </a><el-input v-model="cyd_data.sample_base_unit" clearable="true" style="width:180px"></el-input>
  64. </el-descriptions-item>
  65. <el-descriptions-item label="*抽样场所" prop="cyd_data.sample_ground" class="labelItem" size="mini" required >
  66. <el-radio v-model="cyd_data.sample_ground" label="生产基地/企业">生产基地/企业</el-radio>
  67. <el-radio v-model="cyd_data.sample_ground" label="屠宰场">屠宰场</el-radio>
  68. <el-radio v-model="cyd_data.sample_ground" label="农贸市场">农贸市场</el-radio>
  69. <el-radio v-model="cyd_data.sample_ground" label="批发市场">批发市场</el-radio>
  70. <el-radio v-model="cyd_data.sample_ground" label="超市">超市</el-radio>
  71. <el-radio v-model="cyd_data.sample_ground" label="其他">其他</el-radio>
  72. </el-descriptions-item> -->
  73. </el-descriptions>
  74. <!-- 受检单位情况 -->
  75. <el-descriptions :column="1" border style="" >
  76. <el-descriptions-item label="被抽查单位信息" >
  77. <el-descriptions :column="1" border size="mini" style="width:100%;font-size:20px;">
  78. <el-descriptions-item label="单位名称" prop="inspected_unit.inspected_name" size="mini" required>
  79. {{inspected_unit.inspected_name}}
  80. </el-descriptions-item>
  81. <el-descriptions-item label="单位地址" prop="inspected_unit.inspected_address" size="mini" required>
  82. {{inspected_unit.inspected_address}}
  83. </el-descriptions-item>
  84. <el-descriptions-item label="联系人" prop="inspected_unit.contact_name" size="mini" required>
  85. {{inspected_unit.contact_name}}
  86. </el-descriptions-item>
  87. <el-descriptions-item label="联系电话" prop="inspected_unit.contact_phone" size="mini" required>
  88. {{inspected_unit.contact_phone}}
  89. </el-descriptions-item>
  90. <el-descriptions-item label="Email" prop="inspected_unit.contact_email" size="mini">
  91. {{inspected_unit.contact_email}}
  92. </el-descriptions-item>
  93. </el-descriptions>
  94. </el-descriptions-item>
  95. </el-descriptions>
  96. <!-- 样品信息 -->
  97. <el-descriptions id="sampleInfo" :column="1" border style="">
  98. <el-descriptions-item label="样品信息">
  99. <el-descriptions :column="1" border size="mini" style="width:100%;margin-bottom:5px">
  100. <el-descriptions-item label="抽样地点" prop="cyd_data.cydProfile.sample_address" size="mini" required>
  101. {{cyd_data.cydProfile.sample_address}}
  102. </el-descriptions-item>
  103. </el-descriptions>
  104. <div>
  105. <el-table :data="sample" border stripe highlight-current-row style="width: 100%;border:1px;"
  106. :row-style="rowStyle" :cell-style="cellStyle">
  107. <el-table-column :key="table.label" v-for="table in tableHeader" :label="table.label"
  108. :prop="table.prop" align="center" :width="table.width" :fixed="table.fixed" />
  109. </el-table>
  110. </div>
  111. </el-descriptions-item>
  112. </el-descriptions>
  113. <!-- 抽样单位信息 -->
  114. <el-descriptions :column="1" border style="" >
  115. <el-descriptions-item label="抽样单位信息" >
  116. <el-descriptions :column="1" border size="mini" style="width:100%">
  117. <el-descriptions-item label="单位名称" prop="sampleOrgId.name" size="mini" required>
  118. {{sampleOrgId.name}}
  119. </el-descriptions-item>
  120. <el-descriptions-item label="机构类型" prop="sampleOrgId.groupname" size="mini" required>
  121. {{sampleOrgId.groupname}}
  122. </el-descriptions-item>
  123. <el-descriptions-item label="联系人" prop="sampleOrgId.contact_name" size="mini" required>
  124. {{sampleOrgId.contact_name}}
  125. </el-descriptions-item>
  126. <el-descriptions-item label="联系电话" prop="sampleOrgId.contact_phone" size="mini" required>
  127. {{sampleOrgId.contact_phone}}
  128. </el-descriptions-item>
  129. </el-descriptions>
  130. </el-descriptions-item>
  131. </el-descriptions>
  132. <!-- 备注 -->
  133. <el-descriptions :column="1" border style="" >
  134. <el-descriptions-item label="备注" >
  135. {{cyd_data.cydProfile.cyd_log}}
  136. </el-descriptions-item>
  137. </el-descriptions>
  138. </div>
  139. <!-- 底部按钮 -->
  140. <el-form>
  141. <el-form-item class="btn">
  142. <el-button type="primary" @click="back()">返回任务详情</el-button>
  143. <!-- <el-button @click="resetForm()">重置</el-button>
  144. <el-button @click="onSubmit">保存,继续添加</el-button> -->
  145. </el-form-item>
  146. </el-form>
  147. </div>
  148. </template>
  149. <script>
  150. const token = window.sessionStorage.getItem('token')
  151. import {
  152. provinceAndCityData,
  153. regionData,
  154. provinceAndCityDataPlus,
  155. regionDataPlus,
  156. CodeToText,
  157. TextToCode
  158. } from 'element-china-area-data'
  159. export default {
  160. name: 'inputSample',
  161. data() {
  162. return {
  163. myHeaders: {
  164. Authorization: 'bearer' + token
  165. },
  166. fileList: [],
  167. form: {},
  168. cyd_data: {
  169. cydProfile: '',
  170. },//抽样单信息上部分
  171. inspected_unit: {
  172. inspected_name: '',
  173. inspected_address: '',
  174. contact_name: '',
  175. contact_phone: '',
  176. contact_email: ''
  177. },//受检单位信息
  178. sample: {},//样品信息
  179. sampleOrgId: [],//抽样单位信息
  180. units: [],
  181. production: [],
  182. // 样品下拉框
  183. sampleList: [],
  184. task_id: '',
  185. undertake_id: '',
  186. // 产地
  187. options: regionData,
  188. selectedOptions: [],
  189. cellStyle: {
  190. padding: 2 + 'px'
  191. },
  192. rowStyle: {
  193. height: 35 + 'px'
  194. },
  195. tableHeader: [{
  196. label: '样品名称',
  197. prop: 'sample_name'
  198. // fixed: 'left'
  199. },
  200. {
  201. label: '样品来源',
  202. prop: 'sample_source',
  203. // width: 180
  204. },
  205. {
  206. label: '抽样数量',
  207. prop: 'sample_count',
  208. // width: 150
  209. },
  210. {
  211. label: '抽样基数',
  212. prop: 'sample_base',
  213. // width: 100
  214. },
  215. {
  216. label: '生产日期',
  217. prop: 'sample_md_date',
  218. // width: 100
  219. }
  220. ],
  221. }
  222. },
  223. created() {
  224. this.task_id = this.$route.params.task_id
  225. this.task_profile_id = this.$route.params.id
  226. console.log(this.task_id)
  227. console.log(this.task_profile_id)
  228. this.getCyd()
  229. },
  230. methods: {
  231. // 获取抽样单信息
  232. async getCyd() {
  233. const result = await this.$http.post('getCyd', {
  234. task_profile_id: this.task_profile_id
  235. })
  236. console.log(result.data.data)
  237. this.cyd_data = result.data.data
  238. this.inspected_unit = result.data.data.inspectedUnit
  239. this.sample = result.data.data.sample
  240. if(this.sample.sample_source == ''){
  241. this.sample.sample_source = '自产'
  242. }
  243. this.sampleOrgId = result.data.data.taskProfile.sampleOrgId
  244. console.log(this.cyd_data)
  245. console.log(this.inspected_unit)
  246. console.log(this.sample)
  247. console.log(this.sampleOrgId)
  248. },
  249. // 生成样品编码
  250. async createCode() {
  251. var that = this
  252. const result = await this.$http.post('getSampleId', {
  253. task_id: this.task_id
  254. })
  255. console.log(result.data.data.id)
  256. if (result.data.code == 0) {
  257. that.cyd_data.sample_id = result.data.data.id
  258. this.getTestObj()
  259. }
  260. },
  261. // 获取选择产地
  262. handleChange() {
  263. var that = this
  264. var loc = "";
  265. // console.log(this.form.place)
  266. for (let i = 0; i < this.selectedOptions.length; i++) {
  267. loc += CodeToText[this.selectedOptions[i]];
  268. }
  269. // console.log(loc)
  270. that.cyd_data.place = loc
  271. console.log(that.cyd_data.place)
  272. },
  273. // 上传成功(要确认数据)
  274. uploadSuccess(res) {
  275. console.log(res.data)
  276. this.cyd_data.file_url = res.data.fileUrl
  277. this.cyd_data.file_name = res.data.fileName
  278. },
  279. async onSubmit() {
  280. console.log(this.cyd_data.sample_name)
  281. var that = this
  282. console.log(that.cyd_data)
  283. that.cyd_data.task_id = that.task_id
  284. that.cyd_data.undertake_id = that.undertake_id
  285. that.form.cyd_data = that.cyd_data
  286. that.form.unit_test = that.unit_test
  287. that.form.unit_production = that.unit_production
  288. that.form.unit_sample = that.unit_sample
  289. console.log(that.form)
  290. const result = await this.$http.post('saveSample', this.form)
  291. if (result.data.code == 0) {
  292. // that.form.sample_id = result.data.data.id
  293. this.$message({
  294. type: 'success',
  295. message: '提交抽样单成功!'
  296. });
  297. }
  298. },
  299. // 重置表单
  300. // resetForm() {
  301. // // console.log(this.form)
  302. // this.cyd_data = '';
  303. // this.unit_test = '';
  304. // this.unit_production = '';
  305. // this.unit_sample = '';
  306. // this.selectedOptions = '';
  307. // },
  308. // 返回
  309. back() {
  310. var that = this
  311. console.log(that.task_id)
  312. this.$router.push({
  313. name: 'setTaskcd',
  314. params: {
  315. id: that.task_id
  316. }
  317. })
  318. }
  319. },
  320. }
  321. </script>
  322. <style lang="less" scoped>
  323. .form {
  324. display: flex;
  325. flex-direction: row;
  326. justify-content: center;
  327. align-content: flex-start;
  328. }
  329. .el-descriptions {
  330. width: 80%;
  331. margin: auto;
  332. }
  333. /deep/ .el-descriptions__title {
  334. margin: auto;
  335. font-size: 1.25rem;
  336. // font-weight: 31.25rem !important;
  337. }
  338. .btn{
  339. margin-top:20px ;
  340. // float: right;
  341. text-align: center;
  342. }
  343. /deep/ #sampleReport{
  344. .el-descriptions-item__label.is-bordered-label{
  345. width: 12%;
  346. font-size: .875rem;
  347. }
  348. .el-descriptions-item__content{
  349. font-size: .875rem;
  350. }
  351. }
  352. </style>