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">
              <el-input v-model="forminfo.templateName" placeholder="请输入" maxlength="20"></el-input>

            </el-form-item>
          </el-col>

          <el-col :span="12" style="display: flex;align-items: center;">
            <el-form-item label="word模板" prop="templateAttachment" :style="forminfo.templateAttachment?'width: 100%;':''">
              <upfile :accept="'.docx,.doc'" filePath="mb" inputtype="templateAttachment" :value="forminfo.templateAttachment"
                @changimg="e=>changimg(e,'templateAttachment')"></upfile>
               

            </el-form-item>

            <div v-if="!forminfo.templateAttachment" class="greens tableBtn iterem" @click.stop="openfile($baseURL+'/zsfwzxt/mb/fa0cc984-e1ac-474e-a579-89ea79cc9b8e-ces合同.docx')">模版文件</div>

          </el-col>
        </el-row>
      </el-form>

      <TitleWithCircle title="合同信息" style="margin-bottom: 20px;" />
      <mbadd :list1="list2" :iscopy="true"/>
      <TitleWithCircle title="其他信息管理" />
      <div style="margin-left: 65px;margin-top: 20px;margin-bottom: 20px;">
        <el-button  @click="mingShow()" style="background-color: #3F9B6A;color: #fff;">添加</el-button>

      </div>

      <mbadd :list1="list1" :iscopy="true"/>

      <div style="margin-top: 20px;margin-left: 65px;">
        <div style="padding: 0px 20px 0px 0px">

          <el-table :data="list1"

            :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}">
            <el-table-column label="字段排序">
              <template slot-scope="scope">
                {{scope.$index + 1}}
              </template>
            </el-table-column>
            <el-table-column prop="notes" label="字段名称">
              <template slot-scope="scope">

                {{scope.row.name?scope.row.name : '-'}}

              </template>
            </el-table-column>
            <el-table-column prop="notes" label="字段key">
              <template slot-scope="scope">

                {{scope.row.key?scope.row.key : '-'}}

              </template>
            </el-table-column>
            <el-table-column prop="notes" label="字段类型">
              <template slot-scope="scope">

                {{scope.row.type?scope.row.type : '-'}}

              </template>
            </el-table-column>
            <el-table-column prop="notes" label="是否必填">
              <template slot-scope="scope">

                {{scope.row.isrequired?scope.row.isrequired : '-'}}

              </template>
            </el-table-column>
            <el-table-column prop="notes" label="字段宽度">
              <template slot-scope="scope">

                {{scope.row.width?scope.row.width : '-'}}

              </template>
            </el-table-column>
            <el-table-column prop="notes" label="限制规则">
              <template slot-scope="scope">

                {{scope.row.length?scope.row.length : '-'}}

              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <div @click="MingDelete(scope.$index)" class="tableBtn greens">删除</div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <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>

      <el-dialog :visible.sync="addMing" title="添加" style="padding: 0;z-index: 9999999;" width="50%" append-to-body center

        :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
        <div v-if="addMing">
          <el-form :model="addmbitem" :rules="ruleaddmbitem" ref="addmbitem" label-width="130px" class="demo-ruleForm">

            <el-form-item label="字段名称" prop="name">
              <el-input v-model="addmbitem.name" placeholder="请输入" maxlength="20"></el-input>

            </el-form-item>

            <el-form-item label="字段key" prop="key">
              <el-input v-model="addmbitem.key" placeholder="请输入" maxlength="20"></el-input>

            </el-form-item>

            <el-form-item label="字段类型" prop="type">
              <el-select v-model="addmbitem.type" placeholder="请选择" style="width: 100%;">
                <el-option v-for="(item,index) in mobantype" :key="index" :label="item.label" :value="item.value"></el-option>

              </el-select>
            </el-form-item>

            <el-form-item label="选择内容" v-if="addmbitem.type == '下拉选择'">
              <el-button @click="additemlist" style="background-color: #3F9B6A;color: #fff;">添加</el-button>
              <el-input v-for="(item,index) in addmbitem.list" :key="index" v-model="item.label" placeholder="请输入" maxlength="20" @input="e=>inputvalue(e,index)"></el-input>
  
            </el-form-item>
            <el-form-item label="是否必填" prop="isrequired">
              <el-select v-model="addmbitem.isrequired" placeholder="请选择" style="width: 100%;">

                <el-option label="是" value="是"></el-option>
                <el-option label="否" value="否"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="字段宽度" prop="width">
              <el-select v-model="addmbitem.width" placeholder="请选择" style="width: 100%;">

                <el-option label="50%（半行）" value="50%（半行）"></el-option>
                <el-option label="100%（一行）" value="100%（一行）"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="限制规则" prop="length">
              <el-input v-model.number="addmbitem.length" placeholder="请输入" maxlength="20"></el-input>

            </el-form-item>
          </el-form>
        </div>
        <template #footer>
          <div style="display: flex; justify-content: flex-end; align-items: center;">
            <el-button @click="minSev" style="background-color: #3F9B6A;color: #fff;">确定</el-button>
            <el-button @click="mingClose" class="buttonHover"
              style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">取消</el-button>
          </div>
        </template>
      </el-dialog>
    </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:[],
          list2: [
            {
              name: '合同类型',
              key: 'contractType',
              type: '下拉选择',
              isrequired: '是',
              width: '50%（半行）',
              length: '20',
              value: '',
              list: [{
                  label: '商铺合同',
                  value: '商铺合同',
                },
                {
                  label: '广告位合同',
                  value: '广告位合同',
                },
                {
                  label: '场地合同',
                  value: '场地合同',
                },
              ]
            },
            {
              name: '合同编号',
              key: 'contractNumber',
              type: '单行文本',
              isrequired: '是',
              width: '50%（半行）',
              length: '20',
              value: '',
            },
            {
              name: '标段号',
              key: 'sectionNumber',
              type: '单行文本',
              isrequired: '是',
              width: '50%（半行）',
              length: '20',
              value: '',
            },
            {
              name: '合同名称',
              key: 'contractName',
              type: '单行文本',
              isrequired: '是',
              width: '50%（半行）',
              length: '50',
              value: '',
            },
            {
              name: '合同签订日期',
              key: 'contractSigningDate',
              type: '日期',
              isrequired: '是',
              width: '50%（半行）',
              length: '',
              value: '',
            },
            {
              name: '押金',
              key: 'earnestMoney',
              type: '单行数字文本',
              isrequired: '是',
              width: '50%（半行）',
              length: '20',
              value: '',
            },
            {
              name: '起租日期',
              key: 'leaseStartDate',
              type: '日期',
              isrequired: '是',
              width: '50%（半行）',
              length: '',
              value: '',
            },
            {
              name: '终止日期',
              key: 'contractTerminationDate',
              type: '日期',
              isrequired: '是',
              width: '50%（半行）',
              length: '',
              value: '',
            },
            {
              name: '付款周期',
              key: 'paymentCycle',
              type: '下拉选择',
              isrequired: '是',
              width: '50%（半行）',
              length: '20',
              value: '',
              list: [{
                  label: '按年',
                  value: '按年',
                },
                {
                  label: '按月',
                  value: '按月',
                },
                {
                  label: '按日',
                  value: '按日',
                },
                {
                  label: '季度',
                  value: '季度',
                },
              ]
            },
            {
              name: '租金',
              key: 'contractAmount',
              type: '单行数字文本',
              isrequired: '是',
              width: '50%（半行）',
              length: '20',
              value: '',
            },
            {

              name: '首次付款日',

              key: 'paymentDay',
              type: '付款日',
              isrequired: '是',
              width: '50%（半行）',
              length: '20',
              value: '',
            },
            {
              name: '承租人银行账号',
              key: 'tenantBankAccount',

              type: '银行账号',

              isrequired: '是',
              width: '50%（半行）',

              length: '',

              value: '',
            },
            {
              name: '绑定商家',
              key: 'relatedMerchants',
              type: '商家',
              isrequired: '是',
              width: '100%（一行）',
              length: '',
              value: '',
            },
            {
              name: '承租人名称',
              key: 'tenantName',
              type: '单行文本',
              isrequired: '是',
              width: '50%（半行）',
              length: '20',
              value: '',
            },
            {
              name: '联系电话',
              key: 'tenantTelephone',

              type: '联系电话',

              isrequired: '是',
              width: '50%（半行）',
              length: '20',
              value: '',
            },
            // {
            //   name: '附件信息',
            //   key: 'appendicesContract',
            //   type: '附件',
            //   isrequired: '是',
            //   width: '100%（一行）',
            //   length: '',
            //   value: '',
            // },
            {
              name: '绑定资源',
              key: 'shopNumber',
              type: '资源',
              isrequired: '是',
              width: '100%（一行）',
              length: '',
              value: '',
              list:[]
            },
          ],
          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
          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: '',
                  list:[]
                }
                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) {

                let allist = [...this.list2,...this.list1]

                let listallcl = allist.map((item) => {
                  item.value = ''
                   return item;
                });
                this.forminfo.otherInfo = JSON.stringify(listallcl)

                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>