qdtlui/src/views/qdtl/document/index.vue

<template>
  <div class="app-container" >
      <!-- <div style="overflow:auto;height:100rem"> -->
        <div class="divtitle">
             <img src="@/assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
            <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:0.5rem">页眉</div>
        </div>

        <div style='margin-top:0em'>
             <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="10rem" >
                  <el-row style="">
                        <el-col :span="12" style="padding-left:10rem">
                            <el-form-item label="文头:" prop="wenTou">
                                    <el-input
                                    v-model="queryParams.wenTou"
                                    placeholder="请输入文头"
                                    clearable
                                    size="small"
                                    style="width:50rem;margin-left:3rem"
                                    />
                                </el-form-item>
                            </el-col>
                          <el-col :span="12">
                            <el-form-item label="标题:" prop="title">
                                    <el-input
                                    v-model="queryParams.title"
                                    placeholder="请输入标题"
                                    clearable
                                    size="small"
                                    style="width:30rem;margin-left:3rem"
                                    />
                                </el-form-item>
                            </el-col>
                   </el-row>
                    <el-row style="">
                        <el-col :span="12" style="padding-left:10rem">
                            <el-form-item label="期数:" prop="periods">
                                <div style="font-size:1.5rem;color:white;margin-left:3rem">
                                     第
                                    <el-input
                                    v-model="queryParams.periods"
                                    clearable
                                    size="small"
                                    style="width:10rem;margin-left:0.3rem"
                                    />
                                    期
                                </div>
                                </el-form-item>
                            </el-col>
                          <el-col :span="12">
                            <el-form-item label="副标题:" prop="secondTitle">
                                    <el-input
                                    v-model="queryParams.secondTitle"
                                    placeholder="请输入副标题"
                                    clearable
                                    size="small"
                                    style="width:30rem;margin-left:3rem"
                                    />
                                </el-form-item>
                            </el-col>
                   </el-row>
                    <el-row style="">
                        <el-col :span="12" style="padding-left:10rem">
                            <el-form-item label="发文日期:" prop="publishDate">
                                     <el-date-picker
                                                v-model="queryParams.publishDate"
                                                type="date"
                                                placeholder="选择日期"
                                                format="yyyy 年 MM 月 dd 日"
                                                value-format="yyyy-MM-dd"
                                                style="margin-left:3rem">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                   </el-row>

             </el-form>
        </div>

        <div class="divtitle">
             <img src="@/assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
            <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:0.5rem">正文内容</div>
        </div>

        <div style="padding-left:3rem;padding-top:5rem">
              <div>
                        <div style="font-size: 1.6rem;
                                    font-family: Microsoft YaHei;
                                    font-weight: 400;
                                    color: #FFFFFF;">一、市镇工作动态</div>
                        <div>
                                <div style='font-size: 1.6rem;
                                            font-family: Microsoft YaHei;
                                            font-weight: 400;
                                            color: #FFFFFF;
                                            margin-top:2rem'>市指挥中心动态</div>
                                <div>
                                    <el-input
                                        type="textarea"
                                        :rows="5"
                                        placeholder="请输入200字以内的案例介绍"
                                        v-model="queryParams.centerNews"
                                        style="margin-top:2rem">
                                        </el-input>
                                </div>
                                <div style='font-size: 1.6rem;
                                            font-family: Microsoft YaHei;
                                            font-weight: 400;
                                            color: #FFFFFF;
                                            margin-top:2rem'>区镇都动态</div>
                                <div>
                                    <el-input
                                        type="textarea"
                                        :rows="5"
                                        placeholder="请输入200字以内的案例介绍"
                                        v-model="queryParams.centerNews"
                                        style="margin-top:2rem">
                                        </el-input>
                                </div>
                        </div>
              </div>
              <div style="margin-top:2rem">
                       <div style="font-size: 1.6rem;
                                    font-family: Microsoft YaHei;
                                    font-weight: 400;
                                    color: #FFFFFF;">二、典型案例</div>
                        <div style="margin-top:1rem:padding-left:10rem">
                              <el-form :model="exampleObj" ref="exampleForm" :inline="true" label-width="68px">
                                        <el-form-item label="所属区域" prop="areaName">
                                            <el-input
                                            v-model="exampleObj.areaName"
                                            clearable
                                            size="small"
                                            />
                                        </el-form-item>
                                        <el-form-item label="内容描述" prop="content">
                                            <el-input
                                            v-model="exampleObj.content"
                                            clearable
                                            size="small"
                                            />
                                        </el-form-item>
                                         <el-form-item>
                                            <el-button type="primary" size="mini" @click="addExample">增加</el-button>
                                        </el-form-item>
                              </el-form>
                        </div>
                        <div style="margin-top:0.1rem">
                            <el-table v-loading="loading" :data="basicExampleList"  stripe
                                        class="my_table"
                                        :row-class-name="tableRowClassName"
                                        :header-cell-style="{background:'#24A3B3 50%',color: '#C5D0D4'}">
                                        <el-table-column label="序号" align="center" type="index" />
                                        <el-table-column label="所属区域" align="center" prop="areaName" />
                                        <el-table-column label="内容描述" align="center" prop="content" />
                                        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                                            <template slot-scope="scope">
                                            <el-button
                                                size="mini"
                                                type="text"
                                                icon="el-icon-edit"
                                                @click="handleUpdate(scope.row)"
                                                v-hasPermi="['qdtl:plan:edit']"
                                            >修改</el-button>
                                            <el-button
                                                size="mini"
                                                type="text"
                                                icon="el-icon-delete"
                                                @click="handleDelete(scope.row)"
                                                v-hasPermi="['qdtl:plan:remove']"
                                            >删除</el-button>
                                            </template>
                                        </el-table-column>
                                </el-table>
                         </div>
              </div>

               <div style="margin-top:2rem">
                       <div style="font-size: 1.6rem;
                                    font-family: Microsoft YaHei;
                                    font-weight: 400;
                                    color: #FFFFFF;">三、专职巡防员巡防打卡情况</div>
                        <div style="margin-top:1rem:padding-left:10rem">
                              <el-form :model="exampleObj" ref="exampleForm" :inline="true" label-width="13rem">
                                        <el-form-item label="巡防统计周期:" prop="dateArry">
                                            <el-date-picker
                                                v-model="dateArry"
                                                type="daterange"
                                                range-separator="至"
                                                start-placeholder="开始日期"
                                                end-placeholder="结束日期"
                                                value-format="yyyy-MM-dd"
                                                style="color:white">
                                                </el-date-picker>
                                        </el-form-item>
                                         <el-form-item>
                                            <el-button type="primary" size="mini" @click="addExample">确定</el-button>
                                        </el-form-item>
                              </el-form>
                        </div>
                        <div style="margin-top:0.1rem">
                            <el-table v-loading="loading" :data="basicExampleList"  stripe
                                        class="my_table"
                                        :row-class-name="tableRowClassName"
                                        :header-cell-style="{background:'#24A3B3 50%',color: '#C5D0D4'}">
                                        <el-table-column label="序号" align="center" type="index" />
                                        <el-table-column label="所属区域" align="center" prop="areaName" />
                                        <el-table-column label="内容描述" align="center" prop="content" />
                                        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                                            <template slot-scope="scope">
                                            <el-button
                                                size="mini"
                                                type="text"
                                                icon="el-icon-edit"
                                                @click="handleUpdate(scope.row)"
                                                v-hasPermi="['qdtl:plan:edit']"
                                            >修改</el-button>
                                            <el-button
                                                size="mini"
                                                type="text"
                                                icon="el-icon-delete"
                                                @click="handleDelete(scope.row)"
                                                v-hasPermi="['qdtl:plan:remove']"
                                            >删除</el-button>
                                            </template>
                                        </el-table-column>
                                </el-table>
                         </div>
              </div>

               <div style="margin-top:2rem">
                       <div style="font-size: 1.6rem;
                                    font-family: Microsoft YaHei;
                                    font-weight: 400;
                                    color: #FFFFFF;">四、存在问题</div>
                        <div style="margin-top:1rem:padding-left:10rem">
                              <el-form :model="questionObj" ref="exampleForm" :inline="true" label-width="68px">
                                        <el-form-item label="所属区域" prop="areaName">
                                            <el-input
                                            v-model="questionObj.areaName"
                                            clearable
                                            size="small"
                                            />
                                        </el-form-item>
                                        <el-form-item label="内容描述" prop="content">
                                            <el-input
                                            v-model="questionObj.content"
                                            clearable
                                            size="small"
                                            />
                                        </el-form-item>
                                         <el-form-item>
                                            <el-button type="primary" size="mini" @click="addQuestion">增加</el-button>
                                        </el-form-item>
                              </el-form>
                        </div>
                        <div style="margin-top:0.1rem">
                            <el-table v-loading="loading" :data="questionList"  stripe
                                        class="my_table"
                                        :row-class-name="tableRowClassName"
                                        :header-cell-style="{background:'#24A3B3 50%',color: '#C5D0D4'}">
                                        <el-table-column label="序号" align="center" type="index" />
                                        <el-table-column label="所属区域" align="center" prop="areaName" />
                                        <el-table-column label="内容描述" align="center" prop="content" />
                                        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                                            <template slot-scope="scope">
                                            <el-button
                                                size="mini"
                                                type="text"
                                                icon="el-icon-edit"
                                                @click="handleUpdate(scope.row)"
                                                v-hasPermi="['qdtl:plan:edit']"
                                            >修改</el-button>
                                            <el-button
                                                size="mini"
                                                type="text"
                                                icon="el-icon-delete"
                                                @click="handleDelete(scope.row)"
                                                v-hasPermi="['qdtl:plan:remove']"
                                            >删除</el-button>
                                            </template>
                                        </el-table-column>
                                </el-table>
                         </div>
              </div>

               <div style="margin-top:2rem">
                       <div style="font-size: 1.6rem;
                                    font-family: Microsoft YaHei;
                                    font-weight: 400;
                                    color: #FFFFFF;">五、工作建议</div>
                        <div style="margin-top:1rem:padding-left:10rem">
                              <el-form :model="adviceObj" ref="exampleForm" :inline="true" label-width="68px">
                                        <el-form-item label="所属区域" prop="areaName">
                                            <el-input
                                            v-model="adviceObj.areaName"
                                            clearable
                                            size="small"
                                            />
                                        </el-form-item>
                                        <el-form-item label="内容描述" prop="content">
                                            <el-input
                                            v-model="adviceObj.content"
                                            clearable
                                            size="small"
                                            />
                                        </el-form-item>
                                         <el-form-item>
                                            <el-button type="primary" size="mini" @click="addAdvice">增加</el-button>
                                        </el-form-item>
                              </el-form>
                        </div>
                        <div style="margin-top:0.1rem">
                            <el-table v-loading="loading" :data="adviceList"  stripe
                                        class="my_table"
                                        :row-class-name="tableRowClassName"
                                        :header-cell-style="{background:'#24A3B3 50%',color: '#C5D0D4'}">
                                        <el-table-column label="序号" align="center" type="index" />
                                        <el-table-column label="所属区域" align="center" prop="areaName" />
                                        <el-table-column label="内容描述" align="center" prop="content" />
                                        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                                            <template slot-scope="scope">
                                            <el-button
                                                size="mini"
                                                type="text"
                                                icon="el-icon-edit"
                                                @click="handleUpdate(scope.row)"
                                                v-hasPermi="['qdtl:plan:edit']"
                                            >修改</el-button>
                                            <el-button
                                                size="mini"
                                                type="text"
                                                icon="el-icon-delete"
                                                @click="handleDelete(scope.row)"
                                                v-hasPermi="['qdtl:plan:remove']"
                                            >删除</el-button>
                                            </template>
                                        </el-table-column>
                                </el-table>
                         </div>
              </div>
        </div>

         <div class="divtitle" style="margin-top:2rem">
             <img src="@/assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
            <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:0.5rem">页尾</div>
        </div>

         <div style='margin-top:8em'>
             <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="10rem" >
                  <el-row style="">
                        <el-col :span="12" style="padding-left:10rem">
                            <el-form-item label="报送机关:" prop="baoSong">
                                    <el-input
                                    v-model="queryParams.baoSong"
                                    placeholder="请输入报送机关"
                                    clearable
                                    size="small"
                                    style="width:30rem;margin-left:3rem"
                                    />
                                </el-form-item>
                            </el-col>
                          <el-col :span="12">
                            <el-form-item label="抄送机关:" prop="chaoSong">
                                    <el-input
                                    v-model="queryParams.chaoSong"
                                    placeholder="请输入抄送机关"
                                    clearable
                                    size="small"
                                    style="width:30rem;margin-left:3rem"
                                    />
                                </el-form-item>
                            </el-col>
                   </el-row>
                    <el-row style="">
                        <el-col :span="12" style="padding-left:10rem">
                            <el-form-item label="统稿人:" prop="tongGao">
                                    <el-input
                                    v-model="queryParams.tongGao"
                                    clearable
                                    placeholder="请输入统稿人"
                                    size="small"
                                    style="width:30rem;margin-left:3rem"
                                    />
                                </el-form-item>
                            </el-col>
                          <el-col :span="12">
                            <el-form-item label="审核人:" prop="shenHe">
                                    <el-input
                                    v-model="queryParams.shenHe"
                                    placeholder="请输入审核人"
                                    clearable
                                    size="small"
                                    style="width:30rem;margin-left:3rem"
                                    />
                                </el-form-item>
                            </el-col>
                   </el-row>
                    <el-row style="">
                        <el-col :span="12" style="padding-left:10rem">
                            <el-form-item label="签发人:" prop="qianFa">
                                    <el-input
                                    v-model="queryParams.qianFa"
                                    placeholder="请输入签发人"
                                    clearable
                                    size="small"
                                    style="width:30rem;margin-left:3rem"
                                    />
                                </el-form-item>
                            </el-col>
                   </el-row>

             </el-form>
        </div>
      <!-- </div> -->
  </div>
</template>

<script>
import { listDevice, getDevice, delDevice, addDevice, updateDevice } from "@/api/qdtl/device";
import { listArea, getArea, delArea, addArea, updateArea } from "@/api/qdtl/area";
import mapdiv from "@/components/map/index.vue"

export default {
  name: "Device",
  dicts: ['tl_device_type'],
  data() {
    return {
          queryParams:{},
          basicExampleList:[
                {areaName:'汇龙镇',content:'测试内容一'},
                {areaName:'汇龙镇',content:'测试内容二'}
          ],
          questionList:[
                {areaName:'汇龙镇',content:'1测试内容一'},
                {areaName:'汇龙镇',content:'1测试内容二'}
          ],
          adviceList:[
               {areaName:'汇龙镇',content:'2测试内容一'},
               {areaName:'汇龙镇',content:'2测试内容二'}
          ],
          exampleObj:{
              areaName:'',
              content:''
          },
          questionObj:{
              areaName:'',
              content:''
          },
          adviceObj:{
              areaName:'',
              content:''
          },
          dateArry:[],
    };
  },
  created() {
    this.getList();
    this.getAreaList();
  },
  components:{
      mapdiv
    },
  methods: {
       tableRowClassName({ row, rowIndex }) {
            if ((rowIndex + 1) % 2 === 0) {
                return "warning-row";
            } else {
                return "success-row";
            }
       },
       addExample(){
           this.basicExampleList.push(this.exampleObj);
       },
       addQuestion(){
           this.questionList.push(this.questionObj);
       },
       addAdvice(){
           this.adviceList.push(this.adviceObj);
       }

  }
};
</script>

<style scoped>
 .divtitle{
          background: url("~@/assets/images/title2@2x.png") no-repeat;
          background-size: cover;
          width:100%;
          height:3.9rem;
          padding-top:0.8rem;
          padding-left:2rem;
          /* float: left; */
          display: inline-flex;
          margin-bottom: 3rem;
       }
 .el-textarea__inner{
        color:white
 }

.app-container{
      background: url("~@/assets/images/bg@2x.png") ;
      background-size: 100% 100%;

    background-repeat-y: repeat;
    background-position: center;
}

.el-range-editor--medium .el-range-separator{
     color: white
}
</style>