123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139 |
- <template>
- <div class="addPage">
- <div class="title-box">
- <p>{{addPropsData.id?'编辑':'新增'}}</p>
- <p class="reset-button-one" @click="backPage"><i class="el-icon-arrow-left"></i>返回</p>
- </div>
- <div class="addPage-min safe-book-el-dialog" v-if="addType">
- <el-form ref="form" :model="form" :rules="rules" label-width="100px">
- <el-form-item label="化学品名称" prop="name" style="width:498px;">
- <el-input v-model="form.name" placeholder="请输入化学品名称" maxLength="20" style="width:500px;"/>
- </el-form-item>
- <el-form-item label="化学品编号" prop="code" style="width:498px;">
- <el-input v-model="form.code" placeholder="请输入化学品编号" maxLength="20" style="width:500px;"/>
- </el-form-item>
- <el-form-item label="化学品详情" prop="content" style="color:#606266;font-size:16px;font-weight:500;" class="wang-editor-form-item-box">
- <wangEditor :content="form.content" placeholder="请输入化学品详情" @change="change" :min-height="192" style="width:1000px;"/>
- </el-form-item>
- </el-form>
- <p class="bottom-button-p inquire-button-one" @click="submitForm">提交</p>
- </div>
- </div>
- </template>
- <script>
- import { addHazard_book, updateHazard_book } from "@/api/laboratory/hazard_book";
- export default {
- name: "addPage",
- props:{
- addPropsData:{},
- },
- data() {
- return {
- addType:false,
- // 表单参数
- form: {},
- // 表单校验
- rules: {
- name:[
- {required: true, message: '请输入化学品名称', trigger: 'blur'},
- { required: true, message: "请输入化学品名称", validator: this.spaceJudgment, trigger: "blur" }
- ],
- code:[
- {required: true, message: '请输入化学品编号', trigger: 'blur'},
- { required: true, message: "请输入化学品编号", validator: this.spaceJudgment, trigger: "blur" }
- ],
- content:[
- {required: true, message: '请输入化学品详情', trigger: 'blur'},
- { required: true, message: "请输入化学品详情", validator: this.spaceJudgmentHTML, trigger: "blur" }
- ],
- },
- };
- },
- created() {
- },
- mounted(){
- if(this.addPropsData.id){
- this.$set(this,'form',this.addPropsData);
- this.addType=true;
- }else{
- this.addType=true;
- }
- },
- methods: {
- /** 提交按钮 */
- submitForm() {
- this.$refs["form"].validate(valid => {
- if (valid) {
- this.form.content = escape(this.form.content);
- if (this.form.id != null) {
- updateHazard_book(this.form).then( response => {
- this.msgSuccess("修改成功");
- this.$parent.pageToggle(1);
- });
- } else {
- addHazard_book(this.form).then( response => {
- this.msgSuccess("新增成功");
- this.$parent.pageToggle(1);
- });
- }
- }
- });
- },
- backPage(){
- this.$parent.pageToggle(0);
- },
- change(val) {
- this.$set(this.form,'content',val);
- // this.form.content = val;
- console.log(val)
- },
- }
- }
- </script>
- <style scoped lang="scss">
- .addPage{
- flex:1;
- display: flex !important;
- flex-direction: column;
- p{
- margin:0;
- }
- .title-box{
- display: flex;
- height:90px;
- border-bottom: 1px solid #D8D8D8;
- p:nth-child(1){
- flex:1;
- font-size:16px;
- line-height:90px;
- margin-left:18px;
- color:#0045AF;
- }
- p:nth-child(2){
- margin:25px 25px 0 0;
- }
- }
- .addPage-min{
- flex:1;
- display: flex !important;
- flex-direction: column;
- padding:20px!important;
- .bottom-button-p{
- margin:40px auto;
- line-height:40px;
- width:100px;
- text-align: center;
- }
- }
- }
- </style>
- <style lang="scss">
- .wang-editor-form-item-box{
- .el-form-item__content{
- z-index:0;
- }
- }
- </style>
|