webapp / GreenwayWeb

  <template>
    <div style="background-color:#f7f7f7;padding:10px 10px;">

      <div class="zhuti" v-if="onaction == '1'">

        <div style="height:58px;line-height:58px;">
          <div style="color:#0006"> <span>招商方案管理</span> <span style="padding:0 5px;">></span> <span
              style="color:#000000e6">策略管理</span></div>
        </div>
        <div>
          <!-- 搜索 -->
          <div class="formSearch">
            <div class="demo-input-suffix">
              <div style="width:68px;height:36px;line-height:32px;">策略名称</div>
              <el-input placeholder="请输入" v-model="formSel.policyName" style="width:168px;margin-right: 15px">
              </el-input>
              <div style="width:68px;height:36px;line-height:32px;">适用资源</div>

              <el-select v-model="formSel.applicableResources" placeholder="请选择" style="width: 168px;margin-right: 15px">

                <el-option label="商铺" value="商铺" />
                <el-option label="场地" value="场地" />
                <el-option label="广告位" value="广告位" />
              </el-select>

              <!-- <div style="width:68px;height:36px;line-height:32px;">租期</div>

              <el-date-picker  style="width:168px;margin-right: 15px" v-model="plan_Time" value-format="yyyy-MM-dd HH:mm:ss"
                type="datetimerange" range-separator="-" start-placeholder="" end-placeholder=""   prefix-icon="none">
              </el-date-picker> -->

              <div style="width:68px;height:36px;line-height:32px;">是否出租</div>

              <el-select v-model="formSel.isRental" placeholder="请选择" style="width:168px;margin-right: 15px">

                <el-option label="自营" value="0" />

                <el-option label="是" value="1" />
              </el-select>

              <div style="width:68px;height:36px;line-height:32px;">经营类型</div>
              <el-input placeholder="请输入" v-model="formSel.businessType" style="width:168px;margin-right: 15px" />

            </div>
            <div>

              <el-button @click="onSubmit" style="background-color: #3F9B6A;color: #fff">查询

              </el-button>
              <el-button @click="resetting" class="buttonHover"
                style="color: #000;border: 1px solid #DBDBDB;background-color: #fff;">重置
              </el-button>
            </div>
          </div>
          <div style="margin:20px 0;">

            <el-button icon="el-icon-circle-plus-outline"  @click="removeonaction('2')"

              style="background-color: #3F9B6A;color: #fff;padding:8px 15px;">新增</el-button>
          </div>
  
          <!-- 表格 -->
          <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"

            :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}">
            <el-table-column label="序号" min-width="100">

              <template slot-scope="scope">
                {{scope.$index +1}}

              </template>

            </el-table-column>

            <el-table-column label="策略名称" prop="policyName" min-width="200">

            </el-table-column>

            <el-table-column label="适用资源" prop="applicableResources" min-width="100">

            </el-table-column>

            <el-table-column label="经营类型" prop="businessType" min-width="100">

  
            </el-table-column>

            <el-table-column label="租金价格" prop="rentalPrice" min-width="150">

            </el-table-column>

            <el-table-column label="租期" prop="leaseTerm" min-width="100">

            </el-table-column>

            <el-table-column label="是否出租" prop="isRental" min-width="100">

              <template slot-scope="scope">

                {{scope.row.isRental == '0'?'自营':'是'}}

              </template>

            </el-table-column>

            <el-table-column label="操作" min-width="200">

              <template slot-scope="scope">

                <div @click="details(scope.row)" class="tableBtn greens">查看</div>

                <div @click="removeinfo(scope.row)" class="tableBtn greens">编辑</div>

                <div @click="handleDelete(scope.row)" class="tableBtn greens">删除</div>
              </template>
            </el-table-column>
          </el-table>

          <div style="display: flex;justify-content: space-between;" class="bom">
            <div style="font-size: 14px;">共 <span style="color: #3F9B6A;">{{total}}</span> 项数据</div>
            <el-pagination :current-page="pageindex.pageNumber+1" :page-sizes="[10, 20, 50, 100]" :page-size="pageindex.pageSize"
              background small layout="prev, pager, next" :total="total" @size-change="handleSizeChange"
              @current-change="handleCurrentChange">
            </el-pagination>

          </div>
        </div>
      </div>

      <div class="zhuti" v-if="onaction == '2'">
        <div style="height:58px;line-height:58px;">
          <div style="color:#0006"> <span>策略管理</span> <span style="padding:0 5px;">></span> <span
              style="color:#000000e6">新增</span></div>
        </div>
  
        <div style="padding: 20px 20px 20px 0;">
          <addsam @removeonaction="removeonaction"></addsam>
        </div>
      </div>
      <div class="zhuti" v-if="onaction == '3'">
        <div style="height:58px;line-height:58px;">
          <div style="color:#0006"> <span>策略管理</span> <span style="padding:0 5px;">></span> <span
              style="color:#000000e6">查看</span></div>
        </div>
        <div>
          <sam :editbgid="detailsinfo" @removeonaction="removeonaction"></sam>
        </div>
      </div>
      <div class="zhuti" v-if="onaction == '4'">
        <div style="height:58px;line-height:58px;">
          <div style="color:#0006"> <span>策略管理</span> <span style="padding:0 5px;">></span> <span
              style="color:#000000e6">编辑</span></div>
        </div>
  
        <div style="padding: 20px 20px 20px 0;">
          <addsam :info="detailsinfo" @removeonaction="removeonaction"></addsam>
        </div>
      </div>

      <!-- 详情编辑页 -->

      <el-dialog :title="xiangqing==1?'详情页':'编辑页'" :visible.sync="xiang" custom-class='bian_css' style="padding: 0;"
        width="65%" center :close-on-click-modal="false" :show-close="false">

        <div style="padding:20px">

          <el-form :model="secondData" ref="ruleForm" label-width="80px">

            <el-form-item label="策略名称" prop="policyName">

              <el-input v-model="secondData.policyName" style="width: 87%;margin-right: 15px"
                :disabled="xiangqing==1?true:false"></el-input>

            </el-form-item>
            <el-form-item label="适用资源" prop="applicableResources">
              <el-radio-group v-model="secondData.applicableResources" :disabled="xiangqing==1?true:false">

                <el-radio label="商铺" value="商铺">商铺</el-radio>
                <el-radio label="场地" value="场地">场地</el-radio>
                <el-radio label="广告位" value="广告位">广告位</el-radio>

              </el-radio-group>
            </el-form-item>
            <el-form-item label="策略模板" prop="policyTemplate">
              <el-select v-model="secondData.policyTemplate" style="width: 87%;margin-right: 15px" disabled>

                <el-option :label="item.policyName" :value="item.id" v-for="(item,index) in modelData" />

              </el-select>
            </el-form-item>
            <el-row>
              <el-col :span="12">
                <el-form-item label="是否出租" prop="isRental">

                  <el-select v-model="secondData.isRental" style="width: 72%;margin-right: 15px"
                    :disabled="xiangqing==1?true:false">

                    <el-option label="否" value="0" />
                    <el-option label="是" value="1" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">

                <el-form-item label="经营类型" prop="businessType" v-if="secondData.applicableResources == '商铺'">

                  <el-input v-model="secondData.businessType" placeholder="请输入" style="width:  72%;margin-right: 15px"
                    maxlength="50" :disabled="xiangqing==1?true:false"></el-input>

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

              <el-col :span="12">
                <el-form-item label="租金价格" prop="rentalPrice">

                  <el-input v-model="secondData.rentalPrice" style="width: 72%;margin-right: 15px;"
                    :disabled="xiangqing==1?true:false">

                    <template slot="suffix"><span
                        style="position: absolute;top: 19px;right: 1px;width: 50px;">元/m<sup>2</sup></span></template>
                    <!-- <i slot="suffix" class="el-input__icon el-icon-date"></i> -->
                  </el-input>
  
                </el-form-item>
              </el-col>

              <el-col :span="12">

                <el-form-item label="付款周期" prop="leaseTerm">

                  <el-select v-model="secondData.leaseTerm" placeholder="请选择" style="width: 72%;margin-right: 15px"
                    :disabled="xiangqing==1?true:false">

                    <el-option label="日" value="日" />
                    <el-option label="月" value="月" />
                    <el-option label="季" value="季" />
                    <el-option label="年" value="年" />
                  </el-select>

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

            </el-row>
  
            <el-row>

              <el-col :span="12">
                <el-form-item label="租赁时段" prop="leaseDate">
                  <el-date-picker v-model="leaseDate" value-format="yyyy-MM-dd" type="daterange" range-separator="至"

                    start-placeholder="开始日期" end-placeholder="结束日期" style="width: 72%;"
                    :disabled="xiangqing==1?true:false">

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

              <el-col :span="12">
                <el-form-item label="免租条件" prop="rentFreeCondition">

                  <el-input v-model="secondData.rentFreeCondition" style="width: 72%;"
                    :disabled="xiangqing==1?true:false"></el-input>

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

  
            </el-row>
            <el-row>

              <el-col :span="12">
                <el-form-item label="免租期" prop="rentFreePeriod">

                  <el-select v-model="secondData.rentFreePeriod" placeholder="请选择" style="width: 72%;margin-right: 15px"
                    :disabled="xiangqing==1?true:false">

                    <el-option :label="item" :value="item" v-for="item in 31" />
                  </el-select>

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

              <el-col :span="12">

                <el-form-item label="付款日" prop="payDay">
  

                  <el-select v-model="secondData.payDay" placeholder="请选择" style="width: 72%;margin-right: 15px"
                    :disabled="xiangqing==1?true:false">

                    <el-option :label="item" :value="item" v-for="item in 31" />
                  </el-select>

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

            </el-row>

            <el-row>
              <el-col :span="24">
                <div style="display: flex;align-items: baseline;" v-if="xiangqing==1">
                  <div style="height:20px; padding: 0 0 0 12px;color:#000000e6;">优惠政策</div>
                  <div style="padding:20px 10px;width:90%;" v-html="secondData.preferentialPolicy"></div>
                </div>

                <el-form-item label="优惠政策" prop="preferentialPolicy" v-else>

                  <!-- <div style="border: 1px solid #dddfe5;padding:20px;" v-html="secondData.preferentialPolicy" v-if="xiangqing==1"></div> -->
                  <wangEditor v-model="secondData.preferentialPolicy" ref="editor" :height="100"></wangEditor>

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

  
            </el-row>
            <el-row>
  
              <el-col :span="24">

                <div style="display: flex;align-items: baseline;" v-if="xiangqing==1">
                  <div style="height:20px; padding: 0 0 0 12px;color:#000000e6;">其他说明</div>
                  <div style="padding:20px 10px;width:90%;" v-html="secondData.otherDescription"></div>

                </div>
                <el-form-item label="其他说明" prop="otherDescription" v-else>

                  <!-- <div style="border: 1px solid #dddfe5;padding:20px;" v-html="secondData.otherDescription" v-if="xiangqing==1"></div> -->
                  <wangEditor v-model="secondData.otherDescription" ref="editor" :height="100"></wangEditor>

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

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

          <div style="display: flex;justify-content: flex-end;margin-top:20px;">

            <el-button @click="closexaing(1)" class="buttonHover"

              style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">取消</el-button>
            <el-button @click="addCheck()" style="background-color: #3F9B6A;color: #fff"
              v-if="xiangqing==2">确定</el-button>

  
  
          </div>
        </div>
  
      </el-dialog>

      <samXin :xinShow="ggXin" @childClose='childClose'></samXin>

    </div>
  </template>
  
  <script>
    import {

      ceGetAll,
      ceAdd,
      ceEdit,
      ceDel,

    } from '../../api/sam.js'

    import addsam from "@/components/add/addsam"
     import sam from "@/components/chakan/sam"

    import wangEditor from "@/components/editor/index"
    import upimg from "@/components/ImageUpload/index"

    import samXin from "./samXin"

    import {
      uploadUrl
    } from '@/utils/request'
    export default {

      components: {
        wangEditor,
        upimg,
        samXin,
        sam,
        addsam
      },

      data() {
        return {

          onaction: '1',
          detailsinfo: {},

          formInline: {},

          upload: uploadUrl,
          plan_Time: [],

          formSel: {

            policyName: '',
            applicableResources: '',
            businessType: '',
            isRental: '',
            isSelfOperated: '',

            pageNumber: 0,

            pageSize: 10,

          },
          secondData: {},

          xiangqing: 0,
          xiang: false,

          currentPage: 1,

          total: 0,

          flag: false,
          pageSize: 10,
          ggXin: false,
          tableData: [],
          pageindex: {

            pageNumber: 0,

            pageSize: 10,

            isTemplate: '1'

          },

          Modelpageindex: {

            pageNumber: 0,

            pageSize: 10,

            isTemplate: '0'

          },

          fileList: [],

          paymentDate: [],
          leaseDate: [],
          modelData: []

        }
      },
  
      created() {
  
  
      },
      mounted() {

        this.getAll()

      },
  
      methods: {

        details(row) {
          this.detailsinfo = row
          this.onaction = '3'
        },

        removeinfo(row) {
          this.detailsinfo = row
          this.onaction = '4'
        },
  
        removeonaction(e) {
          console.error(e)
          this.onaction = e
          this.pageindex.pageNumber = 0
          this.getAll()
        },

        //查询全数据
        async getAll() {
          const res = await ceGetAll(this.pageindex)

          this.tableData = res.data.content

          this.total = res.data.totalElements
          const ce = await ceGetAll(this.Modelpageindex)
          this.modelData = ce.data.content

        },
  
        //删除记录按钮

        handleDelete(val) {
          const h = this.$createElement;
          this.$msgbox({
            title: '消息',
            message: h('p', null, [
              h('span', null, '是否删除 '),
            ]),
            showCancelButton: true,
            showClose: false,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            customClass: 'oe-dialog-btn',
            beforeClose: (action, instance, done) => {
              if (action === 'confirm') {
                ceDel({
                  id: val.id
                }).then(res => {
                  this.getAll()

                  done();

                })
              } else {
                done();

              }

            }
          })

        },
        //查询
        async onSubmit() {

          if (this.plan_Time.length != 0) {
            this.formSel.leaseStartDate = this.plan_Time[0]
            this.formSel.leaseEndDate = this.plan_Time[1]
          }
          this.formSel.isTemplate = '1'
          const {
            createUser,
            createDate,
            ...rest
          } = this.formSel
  
          // 将剩余的字段存储到this.zhong对象中
          this.formSel = rest
  
          const res = await ceGetAll(this.formSel)
          this.tableData = res.data.content
          this.total = res.data.content.length

        },
  
        //详情点击

        handleEditForm(item, val) {
          this.secondData = item

          this.xiangqing = val
          this.xiang = true
          this.paymentDate[0] = item.paymentStartDate

          this.paymentDate[1] = item.paymentEndDate

          this.leaseDate[0] = item.leaseStartDate

          this.leaseDate[1] = item.leaseEndDate

        },
  
        handleCurrentChange(val) {

          this.pageindex.pageNumber = val - 1
          this.getAll()

        },
        handleSizeChange(val) {

          this.pageindex.pageSize = val
          this.pageindex.pageNumber = 0
          this.getAll()

        },
        closeFn() {
          this.ggXin = false
        },

        closexaing(val) {

          this.xiang = false
        },
        handleClick() {
  
        },
        //上传
  
        handlePreview(file) {
          console.log(file);
        },
        handleRemove(file, fileList) {
          console.log(file, fileList);
        },
        //重置按钮
        resetting() {
          this.formSel = {
  

              policyName: '',
              applicableResources: '',
              businessType: '',
              isRental: '',
              isSelfOperated: '',

              pageNumber: 0,

              pageSize: 10,
  
  
            },
            this.getAll()
  
        },
        childClose(msg) {
          this.ggXin = msg
          this.getAll()
        },

        addbuss() {
          this.ggXin = true

        },
        // 编辑确定

        async addCheck() {
          if (this.leaseDate.length != 0) {
            this.secondData.leaseStartDate = this.leaseDate[0]
            this.secondData.leaseEndDate = this.leaseDate[1]
          }
          if (this.paymentDate.length != 0) {
            this.secondData.paymentStartDate = this.paymentDate[0]
            this.secondData.paymentEndDate = this.paymentDate[1]
          }

          await ceEdit(this.secondData)

          this.xiang = false
          this.getAll()

        },
      }
    }
  </script>

  <style scoped>

    .zhuti {
      padding: 0 20px 20px 20px;
      min-height: calc(100vh - 50px - 20px);
      background-color: #Fff;
  
    }

    .chengeXia {
      border-bottom: 6px solid #3F9B6A;
      padding-bottom: 4px;

      color: #3F9B6A;
    }
  
  

    .formSearch {

      display: flex;

      width: 100%;
      font-size: 14px;
      justify-content: space-between;

    }

    .greens {
      color: #3F9B6A;

    }

    .bg-purple-dark {
      background: #99a9bf;
    }
  
    .bg-purple {

      background: #d3dce6;

    }
  
    .bg-purple-light {
      background: #e5e9f2;
    }

    .grid-content {
      border-radius: 4px;
      min-height: 36px;
    }
  

  </style>
  <style lang="scss" scoped>

    ::v-deep .el-dialog__body {
      padding: 0 0 !important;

    }

    .el-dialog__header{
      padding: 0;
      display: none;

    }

  </style>