webapp / GreenwayWeb

<template>
  <div>
    <TitleWithCircle title="模版" style="margin-bottom: 20px;" />
    <el-form :model="forminfo" :rules="rulesmb" ref="ruleForm1" label-width="130px" class="demo-ruleForm">
      <el-row :gutter="20">
        <el-col :span="12" >
          <el-form-item label="模版名称" prop="templateName">
            <div class="duiqi">{{forminfo.templateName  || '无'}}</div>
          </el-form-item>
        </el-col>
        <el-col :span="12" style="display: flex;align-items: center;">
          <el-form-item label="word模板" prop="templateAttachment"  >
            <div class="duiqi tableBtn" :class="forminfo.templateAttachment?'greens':''" @click ="forminfo.templateAttachment?openfile($baseURL+forminfo.templateAttachment):''">{{forminfo.templateAttachment?'查看详情':'无'}}</div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <TitleWithCircle title="合同信息" style="margin-bottom: 20px;" />
    <mbadd :list1="list1" />



    <div v-if="info.id" style="margin-top: 20px;margin-left: 65px;">
      <el-button @click="close()" class="buttonHover"
        style="color: #606266;border: 1px solid #DBDBDB;background-color: #fff;">返回</el-button>
    </div>
    <div v-else style="margin-top: 20px;margin-left: 65px;">
      <el-button @click="add()" style="background-color: #3F9B6A;color: #fff;">确定</el-button>
      <el-button @click="close()" class="buttonHover"
        style="color: #606266;border: 1px solid #DBDBDB;background-color: #fff;">取消</el-button>
    </div>
  </div>
</template>
<script>
  import upfile from "@/components/fujianUpload/fujianList"
  import TitleWithCircle from '@/components/top/index';
  import mbadd from '@/components/change/mbadd';
  import {
    cereContractTemplateadd
  } from '@/api/newly.js'
import { Input } from "element-ui";
  export default {
    components: {
      TitleWithCircle,
      mbadd,
      upfile
    },
    data() {
      return {
        list1: [
          {
            name: '合同名称',
            key: 'contractName',
            type: '单行文本',
            isrequired: '是',
            width: '50%（半行）',
            length: '50',
            value: '',
          },
        ],
        rulesmb:{
          templateName: [{
            required: true,
            message: '请填写模版名称',
            trigger: 'change'
          }],
          templateAttachment: [{
            required: true,
            message: '请上传word模板',
            trigger: 'change'
          }],
        },
        ruleAddData:{},
        forminfo:{
          templateName: '',       // 模板名称
          templateAttachment: '', // 模板附件路径或名称
          otherInfo: '',          // 其他信息
          templateType: '',       // 模板类型
          creator: '',            // 创建人
          createTime: '',         // 创建时间
          remark1: '',            // 备注1
          remark2: ''             // 备注2
        },
        ruleaddmbitem:{
          name: [{
            required: true,
            message: '请填写字段名称',
            trigger: 'change'
          }],
          key: [{
            required: true,
            message: '请填写字段key',
            trigger: 'change'
          }],
          type: [{
            required: true,
            message: '请选择字段类型',
            trigger: 'change'
          }],
          isrequired: [{
            required: true,
            message: '请选择是否必填',
            trigger: 'change'
          }],
          width: [{
            required: true,
            message: '请选择字段宽度',
            trigger: 'change'
          }],
          // length: [{
          //   required: true,
          //   message: '请填写限制规则',
          //   trigger: 'change'
          // }],
        },
        addmbitem: {
          name: '',
          key: '',
          type: '',
          isrequired: '',
          width: '',
          length: '',
          value: '',
          list:[]
        },
        addMing:false,
         
      }
    },
    computed: {
      mobantype() {
        return this.$store.state.app.mobantype;
      }
    },
    props: {
      info: {
        type: Object,
        default: {}
      }
    },
    async created() {
      if (this.info.id) {
        this.info.otherInfo = JSON.parse(this.info.otherInfo)
        this.list1 =  this.info.otherInfo
        console.error(this.list1)
        this.forminfo = this.info
      }
    },
    methods: {
      inputvalue(e,index){
        console.error(e)
        this.addmbitem.list[index].value = e
      },
      additemlist() {
        this.addmbitem.list.push({
          label: '',
          value: ''
        })
      },
      async mingShow() {
        this.addMing = true
      },
      minSev() {
        // return
        this.$refs.addmbitem.validate((valid) => {
            console.log(valid)
            if (valid) {
              this.list1.push(this.addmbitem)
              this.addmbitem = {
                name: '',
                key: '',
                type: '',
                isrequired: '',
                width: '',
                length: '',
                value: '',
              }
              this.addMing = false
            } else {
              this.$message({
                message: '请填写完整信息',
                type: 'error'
              })
              return false;
            }
          })
      },
      mingClose() {
        this.addMing = false
      },
      openfile(e) {
        if (e) {
          const fullUrl = e;
          try {
            window.open(fullUrl, '_blank'); // 在新标签页中打开文件
          } catch (error) {
            console.error('打开文件失败:', error);
          }
        } else {
          console.error('无文件可查看');
        }
      },
      changimg(e, type) {
        this.forminfo[type] = e
      },
      changimg(e, type) {
        this.forminfo[type] = e
      },
      openfile(e) {
        if (e) {
          const fullUrl = e;
          try {
            window.open(fullUrl, '_blank'); // 在新标签页中打开文件
          } catch (error) {
            console.error('打开文件失败:', error);
          }
        } else {
          console.error('无文件可查看');
        }
      },
      //获取当前时间
      updateCurrentTime() {
        const now = new Date();
        const year = now.getFullYear();
        const month = (now.getMonth() + 1).toString().padStart(2, '0');
        const day = now.getDate().toString().padStart(2, '0');
        const hours = now.getHours().toString().padStart(2, '0');
        const minutes = now.getMinutes().toString().padStart(2, '0');
        const seconds = now.getSeconds().toString().padStart(2, '0');

        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      },
      add() {
       console.error(this.list1)
        this.$refs.ruleForm1.validate((valid) => {
            console.log(valid)
            if (valid) {
              this.forminfo.otherInfo = JSON.stringify(this.list1)
              console.log(
                {...this.forminfo}
              )
              // return
              cereContractTemplateadd({
                ...this.forminfo,
                creator: localStorage.getItem('roleName'),
                createTime: this.updateCurrentTime(),
              }).then(res => {
                console.error(res)
                if (res.code == 200) {
                  this.$message({
                    message: '添加成功',
                    type: 'success'
                  })
                  this.$emit('removeonaction', '1')
                } else {
                  this.$message({
                    message: res.msg,
                    type: 'error'
                  })
                }

              })
            } else {
              this.$message({
                message: '请填写完整信息',
                type: 'error'
              })
              return false;
            }
          })
      },
      close() {
        this.$emit('removeonaction', '1')
      },
    }
  }
</script>
<style lang="css">
  .el-upload {
    display: block;
    text-align: left;
  }

  .el-dialog__header {
    background-color: #F2F3F5;
    text-align: left;
  }

  .el-dialog__title {
    line-height: 30px;
    font-size: 15px;
    color: #303133;
  }

  .iterem {
    z-index: 99;
    margin-left: 10px;
    height: 40px;
    line-height: 25px;
  }
</style>