addLaboratory.vue 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333
  1. <!--新增危险源-->
  2. <template>
  3. <div class="addLaboratory scrollbar-box" v-if="getType">
  4. <!--<p class="title-p color_one">添加危险源</p>-->
  5. <el-form :model="form" ref="form" :rules="rules" label-position="right" label-width="120px">
  6. <el-form-item label="危险源名称:" prop="chName" style="margin-bottom:40px;">
  7. <el-input
  8. v-model="form.chName"
  9. maxlength="20"
  10. placeholder="请输入危险源名称"
  11. clearable
  12. size="small"
  13. />
  14. </el-form-item>
  15. <el-form-item label="型号:" prop="code" style="margin-bottom:40px;">
  16. <el-input
  17. v-model="form.code"
  18. maxlength="10"
  19. placeholder="请输入型号"
  20. clearable
  21. size="small"
  22. />
  23. </el-form-item>
  24. <el-form-item label="危险源类型1:" prop="hazardTypeMode">
  25. <el-select v-model="form.hazardTypeMode" placeholder="请选择" @change="hazardTypeChange()">
  26. <el-option :label="item.dictLabel" :value="item.dictValue" v-for="(item,index) in materialTypeList" :key="index"></el-option>
  27. </el-select>
  28. </el-form-item>
  29. <el-form-item label="详情:" prop="content">
  30. <UEditor ref="UEditor" :content="form.content" :min-height="192" />
  31. <!--<ueditortwo :config=config ref="ueditor"></ueditortwo>-->
  32. </el-form-item>
  33. <div class="button-box">
  34. <el-button class="color_99" @click="leftButtonClick">取消</el-button>
  35. <el-button class="color_ff back_one" @click="previewButton">确定</el-button>
  36. </div>
  37. </el-form>
  38. <el-dialog title="预览" class="richTextDialog" v-if="richTextDialogType" :close-on-click-modal="false" :visible.sync="richTextDialogType" append-to-body>
  39. <div class="button-max-box">
  40. <el-select v-model="previewKey" placeholder="请选择" style="margin-bottom:20px;">
  41. <el-option
  42. v-for="item in previewSetList"
  43. :key="item.key"
  44. :label="item.name"
  45. :value="item.key">
  46. </el-option>
  47. </el-select>
  48. <p class="add-button-one-90" style="margin-left:20px;" @click="rightButtonClick">确定</p>
  49. </div>
  50. <div class="text-max-box" :class="previewKey!=2?'move-text-max-box':''">
  51. <p class="text-max-null-p"></p>
  52. <div class="text-box scrollbar-box w-e-text" v-html="text"
  53. :style="'width:'+previewSetList[previewKey].width+'px;height:'+previewSetList[previewKey].height+'px;'">
  54. </div>
  55. <p class="text-max-null-p"></p>
  56. </div>
  57. </el-dialog>
  58. </div>
  59. </template>
  60. <script>
  61. import { getHazard, addHazard, updateHazard } from "@/api/laboratory/hazard";
  62. import { dangerList, gasCategoryList } from '@/api/gasManage3_0/gasManage'
  63. export default {
  64. props:{
  65. hazardId: null,
  66. },
  67. name: 'addLaboratory',
  68. data() {
  69. return {
  70. getType:false,
  71. form:{
  72. content:'',
  73. },
  74. // 表单校验
  75. rules: {
  76. chName: [
  77. { required: true, message: "请输入标题", trigger: "blur" },
  78. { required: true, message: "请输入标题", validator: this.spaceJudgment, trigger: "blur" }
  79. ],
  80. code: [
  81. { required: true, message: "请输入编号", trigger: "blur" },
  82. { required: true, message: "请输入编号", validator: this.spaceJudgment, trigger: "blur" }
  83. ],
  84. content: [
  85. { required: true, message: "请编辑详情", trigger: "change" },
  86. { required: true, message: "请编辑详情", validator: this.spaceJudgmentHTML, trigger: "blur" }
  87. ],
  88. hazardTypeMode: [
  89. { required: true, message: "请选择危险源类型", trigger: "change" },
  90. { required: true, message: "请选择危险源类型", validator: this.spaceJudgmentHTML, trigger: "blur" }
  91. ],
  92. },
  93. config: {
  94. autoHeightEnabled: false,
  95. autoFloatEnabled: true,
  96. initialContent: '请输入内容', //初始化编辑器的内容,也可以通过textarea/script给值,看官网例子
  97. autoClearinitialContent: true, //是否自动清除编辑器初始内容,注意:如果focus属性设置为true,这个也为真,那么编辑器一上来就会触发导致初始化的内容看不到了
  98. initialFrameWidth: null,
  99. initialFrameHeight: 450,
  100. BaseUrl: '',
  101. // serverUrl: '//192.168.1.8:9300/exec',
  102. //serverUrl: '//180.76.134.43:30002/base/exec',
  103. serverUrl: '//'+this.judgmentNetworkReturnAddress()+'/base/exec',
  104. UEDITOR_HOME_URL: '/public/ueditor-1.4.3.3/'
  105. },
  106. materialTypeList:[],
  107. richTextDialogType:false,
  108. previewKey:0,
  109. previewSetList:[
  110. // {
  111. // key:0,
  112. // name:"iphone 12 pro",
  113. // width:390,
  114. // height:884,
  115. // scale:0.203125,
  116. // },
  117. // {
  118. // key:1,
  119. // name:"iphone XR",
  120. // width:414,
  121. // height:896,
  122. // scale:0.215625,
  123. // },
  124. {
  125. key:0,
  126. name:"iphone SE",
  127. width:375,
  128. height:667,
  129. scale:0.195312,
  130. },
  131. // {
  132. // key:3,
  133. // name:"Samsung Galaxy A51/71",
  134. // width:412,
  135. // height:914,
  136. // scale:0.214583,
  137. // },
  138. {
  139. key:1,
  140. name:"Samsung Galaxy S8+",
  141. width:360,
  142. height:740,
  143. scale:0.1875,
  144. },
  145. // {
  146. // key:5,
  147. // name:"Samsung Galaxy S20",
  148. // width:412,
  149. // height:915,
  150. // scale:0.214583,
  151. // },
  152. {
  153. key:2,
  154. name:"化学品终端",
  155. width:1041,
  156. height:725,
  157. scale:0.5421875,
  158. },
  159. ],
  160. text:"",
  161. }
  162. },
  163. created() {
  164. this.form.id = this.hazardId
  165. if(this.form.id){
  166. this.handleUpdate()
  167. }else{
  168. this.getType = true;
  169. }
  170. this.getDicts("combustibility").then(response => {
  171. this.combustibilitys= response.data;
  172. })
  173. },
  174. methods: {
  175. hazardTypeChange(){
  176. let self=this;
  177. this.materialTypeList.forEach(function(item) {
  178. if(self.form.hazardTypeMode==item.dictValue){
  179. self.form.hazardTypeModeName=item.dictLabel
  180. }
  181. })
  182. },
  183. //预览
  184. previewButton(){
  185. this.$set(this.form,'content',this.$refs.UEditor.text);
  186. this.$refs["form"].validate(valid => {
  187. if (valid) {
  188. this.$set(this,'text',this.$refs.UEditor.text);
  189. this.richTextDialogType = !this.richTextDialogType
  190. }
  191. });
  192. // if(this.$refs.UEditor.text){
  193. // this.$set(this,'text',this.$refs.UEditor.text);
  194. // this.richTextDialogType = !this.richTextDialogType
  195. // }else{
  196. // this.msgError('请编辑内容')
  197. // }
  198. },
  199. //获取危险源类型
  200. dangerList(){
  201. let _this=this;
  202. dangerList().then( response => {
  203. let res=response.rows;
  204. _this.materialTypeList=res;
  205. });
  206. },
  207. leftButtonClick(){
  208. this.$parent.offLaboratoryButton();
  209. },
  210. rightButtonClick(){
  211. this.$set(this.form,'content',this.$refs.UEditor.text||"");
  212. this.form.content = this.$refs.UEditor.text;
  213. this.submitForm()
  214. },
  215. /** 修改按钮操作 */
  216. handleUpdate() {
  217. getHazard(this.form.id).then(response => {
  218. this.form = response.data;
  219. this.form.hazardTypeMode=response.data.hazardTypeMode+''
  220. this.form.hazardTypeModeName=response.data.hazardTypeModeName
  221. this.form.content = unescape(response.data.content);
  222. this.getType = true;
  223. });
  224. },
  225. /** 提交按钮 */
  226. submitForm() {
  227. this.$refs["form"].validate(valid => {
  228. if (valid) {
  229. this.form.content = escape(this.form.content);
  230. // this.form.ignitionPoint = this.form.ignitionPoint + '℃';
  231. if (this.form.id != null) {
  232. updateHazard(this.form).then(response => {
  233. if(response.code = 200){
  234. this.msgSuccess("修改成功");
  235. this.$parent.clickPageTypeOne()
  236. }
  237. });
  238. } else {
  239. addHazard(this.form).then(response => {
  240. if(response.code = 200){
  241. this.msgSuccess("新增成功");
  242. this.$parent.clickPageTypeOne()
  243. }
  244. });
  245. }
  246. }
  247. });
  248. },
  249. },
  250. mounted() {
  251. this.dangerList();
  252. }
  253. }
  254. </script>
  255. <style lang="scss" scoped>
  256. .addLaboratory{
  257. padding:40px 20px;
  258. .button-box{
  259. margin:0 auto;
  260. width:220px;
  261. display: flex;
  262. p{
  263. cursor:pointer;
  264. width: 100px;
  265. height:40px;
  266. line-height:40px;
  267. font-size:14px;
  268. text-align: center;
  269. }
  270. p:nth-child(1){
  271. margin-right:20px;
  272. color:#999;
  273. background:#e0e0e0;
  274. border-radius:4px;
  275. }
  276. p:nth-child(2){
  277. color:#fff;
  278. border-radius:4px;
  279. }
  280. }
  281. }
  282. </style>
  283. <style lang="scss">
  284. .richTextDialog{
  285. .el-dialog{
  286. width:1083px;
  287. .el-dialog__body{
  288. padding:20px;
  289. }
  290. }
  291. .button-max-box{
  292. display: flex;
  293. .button-null-p{
  294. flex:1;
  295. }
  296. }
  297. .text-max-box{
  298. display: flex;
  299. .text-max-null-p{
  300. flex:1;
  301. }
  302. .text-box{
  303. color:#000;
  304. font-size:16px;
  305. padding:8px;
  306. border:1px solid #dedede;
  307. font-weight:500;
  308. }
  309. }
  310. .move-text-max-box{
  311. video{
  312. width:100%!important;
  313. /*object-fit: fill;*/
  314. height:100%!important;
  315. /*display: block;*/
  316. }
  317. img{
  318. width:100%!important;
  319. height:100%!important;
  320. /*width:1500px;*/
  321. /*margin:20px 200px;*/
  322. }
  323. }
  324. }
  325. .richTextDemo{
  326. }
  327. </style>