调整表单页面初步完成

src/App.vue

@@ -7,11 +7,11 @@
 <script>
 export default {
   name: "app",
-  data() {
+  data () {
     return {};
   },
   watch: {},
-  created() {
+  created () {
 
   },
   methods: {},
@@ -24,7 +24,7 @@ export default {
   height: 100%;
   overflow: hidden;
 }
-.avue--detail .el-col{
+.avue--detail .el-col {
   margin-bottom: 0;
 }
 </style>

src/main.js

@@ -5,14 +5,15 @@ import App from './App';
 import router from './router/router';
 import './permission'; // 权限
 import './error'; // 日志
-import './cache';//页面缓存
+import './cache'; //页面缓存
 import store from './store';
-import {loadStyle} from './util/util'
+import { loadStyle } from './util/util'
 import * as urls from '@/config/env';
 import Element from 'element-ui';
+import '@/styles/xiaoyu.scss'
 import {
-  iconfontUrl,
-  iconfontVersion
+    iconfontUrl,
+    iconfontVersion
 } from '@/config/env';
 
 import i18n from './lang'; // Internationalization
@@ -36,13 +37,13 @@ window.$crudCommon = crudCommon;
 Vue.use(router);
 Vue.use(VueAxios, axios);
 Vue.use(Element, {
-  i18n: (key, value) => i18n.t(key, value)
+    i18n: (key, value) => i18n.t(key, value)
 });
 Vue.use(window.AVUE, {
-  size: 'small',
-  tableSize: 'small',
-  calcHeight: 65,
-  i18n: (key, value) => i18n.t(key, value)
+    size: 'small',
+    tableSize: 'small',
+    calcHeight: 65,
+    i18n: (key, value) => i18n.t(key, value)
 });
 // 注册全局容器
 Vue.component('basicContainer', basicContainer);
@@ -53,7 +54,7 @@ Vue.component('flowDesign', flowDesign);
 Vue.component('tenantPackage', tenantPackage);
 // 加载相关url地址
 Object.keys(urls).forEach(key => {
-  Vue.prototype[key] = urls[key];
+    Vue.prototype[key] = urls[key];
 });
 // 加载NutFlow
 Vue.use(window.WfDesignBase);
@@ -61,14 +62,14 @@ Vue.use(window.WfDesignBase);
 Vue.prototype.website = website;
 // 动态加载阿里云字体库
 iconfontVersion.forEach(ele => {
-  loadStyle(iconfontUrl.replace('$key', ele));
+    loadStyle(iconfontUrl.replace('$key', ele));
 });
 
 Vue.config.productionTip = false;
 
 new Vue({
-  router,
-  store,
-  i18n,
-  render: h => h(App)
-}).$mount('#app');
+    router,
+    store,
+    i18n,
+    render: h => h(App)
+}).$mount('#app');

src/styles/xiaoyu.scss

@@ -0,0 +1,93 @@
+.flexStar {
+    display: flex;
+    justify-content: flex-start;
+}
+
+.flexEnd {
+    display: flex;
+    justify-content: flex-end;
+}
+
+.flexCenter {
+    display: flex;
+    justify-content: center;
+}
+
+.flexBetween {
+    display: flex;
+    justify-content: space-between;
+}
+
+.flexColumn {
+    display: flex;
+    flex-direction: column;
+}
+
+.flexItemsC {
+    display: flex;
+    align-items: center;
+}
+
+.martop5 {
+    margin-top: 5px;
+}
+
+.martop10 {
+    margin-top: 10px;
+}
+
+.martop15 {
+    margin-top: 15px;
+}
+
+.martop20 {
+    margin-top: 20px;
+}
+
+.martop25 {
+    margin-top: 25px;
+}
+
+.marbottom5 {
+    margin-bottom: 5px;
+}
+
+.marbottom10 {
+    margin-bottom: 10px;
+}
+
+.marbottom15 {
+    margin-bottom: 15px;
+}
+
+.marbottom20 {
+    margin-bottom: 20px;
+}
+
+.marbottom25 {
+    margin-bottom: 25px;
+}
+
+.marright5 {
+    margin-right: 5px;
+}
+
+.marright10 {
+    margin-right: 10px;
+}
+
+.marright15 {
+    margin-right: 15px;
+}
+
+.marright20 {
+    margin-right: 20px;
+}
+
+.marright25 {
+    margin-right: 25px;
+}
+
+.marright30 {
+    margin-right: 30px;
+}

src/views/manager/projectinfo/tree.vue

@@ -1286,7 +1286,7 @@ export default {
 
       //#region 调整表单
       adjustmentExcel: '',
-      excelHtml: true,
+      excelHtml: false,
       //#endregion
 
       //#region 
@@ -2088,6 +2088,7 @@ export default {
 //调整表单样式
 .excelHtml {
   position: absolute;
+  z-index: 999999;
   top: 50px;
   left: 0px;
   width: 100%;

src/views/manager/projectinfo/treeTemplate/dynamicExcel.vue

@@ -32,13 +32,20 @@
         id='parent'
       ></div>
       <div class="excelRight">
-
+        <setInputTPT v-if="setUptype===0" />
+        <electronicSignature v-if="setUptype===1" />
+        <setFormula v-if="setUptype===2" />
+        <editDefault v-if="setUptype===3" />
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import setInputTPT from './template/setInputTPT.vue'
+import electronicSignature from './template/electronicSignature.vue'
+import setFormula from './template/setFormula.vue'
+import editDefault from './template/editDefault.vue'
 let tem = localStorage.getItem('excelHtnl')
 import Vue from 'vue'
 
@@ -54,7 +61,7 @@ let component = new MyComponent().$mount()
 export default {
   data () {
     return {
-      setUptype: '0',//右侧显示的类型
+      setUptype: 3,//右侧显示的类型
     }
   },
   methods: {
@@ -64,6 +71,12 @@ export default {
   },
   mounted () {
     document.getElementById('parent').appendChild(component.$el);
+  },
+  components: {
+    setInputTPT,
+    electronicSignature,
+    setFormula,
+    editDefault
   }
 }
 </script>
@@ -95,8 +108,7 @@ export default {
     .excelRight {
       flex-grow: 1;
       box-sizing: border-box;
-      padding-top: 20px;
-      background-color: red;
+      padding: 20px 0px 0px 30px;
     }
   }
 }

src/views/manager/projectinfo/treeTemplate/template/editDefault.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="editDefault">
+    <el-select
+      v-model="value"
+      clearable
+      placeholder="请选择"
+    >
+      <el-option
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      >
+      </el-option>
+    </el-select>
+    <el-input
+      class="martop15"
+      style="width:100%;"
+      type="textarea"
+      :rows="5"
+      placeholder="请输入内容"
+      v-model="textarea"
+    >
+    </el-input>
+
+    <div class="flexEnd martop20">
+      <el-button
+        type="info"
+        size="mini"
+      >重置</el-button>
+      <el-button
+        type="info"
+        size="mini"
+      >确定</el-button>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      options: [{
+        value: '选项1',
+        label: '黄金糕'
+      }, {
+        value: '选项2',
+        label: '双皮奶'
+      }, {
+        value: '选项3',
+        label: '蚵仔煎'
+      }, {
+        value: '选项4',
+        label: '龙须面'
+      }, {
+        value: '选项5',
+        label: '北京烤鸭'
+      }],
+      value: '',
+      textarea: '',
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.editDefault {
+}
+</style>

src/views/manager/projectinfo/treeTemplate/template/electronicSignature.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="dianqian martop20">
+    <el-radio-group v-model="radio">
+      <el-radio :label="3">施工</el-radio>
+      <el-radio :label="6">监理</el-radio>
+      <el-radio :label="9">专家</el-radio>
+      <el-radio :label="12">业主</el-radio>
+    </el-radio-group>
+    <div class="flexBetween martop20">
+      <el-select
+        size='mini'
+        v-model="value"
+        clearable
+        placeholder="请选择"
+      >
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+      <el-select
+        size='mini'
+        v-model="value"
+        clearable
+        placeholder="请选择"
+      >
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+      <el-button size="mini">保存</el-button>
+    </div>
+
+    <table
+      class="table martop20"
+      width='100%'
+      border='1px '
+      bordercolor="#E5E5E5"
+      cellpadding='2px'
+    >
+      <thead
+        cellpadding='2px'
+        height='40px'
+      >
+        <tr>
+          <th width='40%'>元素位置</th>
+          <th width='40%'>签字岗位</th>
+          <th width='20%'>操作</th>
+        </tr>
+      </thead>
+      <tbody height='36px'>
+        <tr
+          v-for="(item,key) in setInputTable"
+          :key="key"
+        >
+          <td>{{item.id}}</td>
+          <td>{{item.id}}</td>
+          <td align="center"><span style="color:red;cursor: pointer;">删除</span></td>
+        </tr>
+      </tbody>
+    </table>
+    <el-button
+      class="martop25"
+      style="float:right;"
+      type="info"
+      size="mini"
+    >保存设置</el-button>
+  </div>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      radio: '',//
+      options: [{
+        value: '选项1',
+        label: '黄金糕'
+      }, {
+        value: '选项2',
+        label: '双皮奶'
+      }, {
+        value: '选项3',
+        label: '蚵仔煎'
+      }, {
+        value: '选项4',
+        label: '龙须面'
+      }, {
+        value: '选项5',
+        label: '北京烤鸭'
+      }],
+      value: '',
+      setInputTable: [{}],
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.dianqian {
+  table {
+    color: #101010;
+    font-size: 14px;
+  }
+}
+</style>

src/views/manager/projectinfo/treeTemplate/template/setFormula.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="setFormula">
+    <el-select
+      v-model="value"
+      clearable
+      placeholder="请选择"
+    >
+      <el-option
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      >
+      </el-option>
+    </el-select>
+    <div class="martop15 maoshu">
+      22
+    </div>
+    <div
+      style="float:right"
+      class="martop20 flexColumn marright10 switch"
+    >
+      <el-switch
+        v-model="value1"
+        inactive-color="#ADBCF9"
+        inactive-text="默认开放"
+      >
+      </el-switch>
+      <el-switch
+        class="martop10"
+        v-model="value1"
+        inactive-color="#00E065"
+        inactive-text="VIP开放"
+      >
+      </el-switch>
+    </div>
+    <div
+      style="width:100%;"
+      class="flexEnd martop20"
+    >
+      <el-button
+        class="martop15"
+        type="info"
+        size="mini"
+      >保存设置</el-button>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  daat () {
+    return {
+      options: [{
+        value: '选项1',
+        label: '黄金糕'
+      }, {
+        value: '选项2',
+        label: '双皮奶'
+      }, {
+        value: '选项3',
+        label: '蚵仔煎'
+      }, {
+        value: '选项4',
+        label: '龙须面'
+      }, {
+        value: '选项5',
+        label: '北京烤鸭'
+      }],
+      value: '',
+      value1: true,
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.setFormula {
+  .maoshu {
+    border: 1px solid #c6c6c6;
+    border-radius: 5px;
+    padding: 15px 20px;
+  }
+  .switch {
+    /deep/.el-switch__label.is-active {
+      width: 60px;
+    }
+  }
+}
+</style>

src/views/manager/projectinfo/treeTemplate/template/setInputTPT.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="setInput">
+    <div class="flexBetween ">
+      <el-select
+        v-model="value"
+        clearable
+        placeholder="请选择"
+      >
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+      <el-select
+        v-model="value"
+        clearable
+        placeholder="请选择"
+      >
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <!-- 添加框 -->
+    <div
+      style="border: 1px dotted rgb(187, 187, 187);box-sizing: border-box;padding: 0px 15px;"
+      class="martop20"
+    >
+      <table
+        class="table"
+        width='100%'
+        border='1px'
+        cellpadding='2px'
+        bordercolor="#E5E5E5"
+      >
+        <thead
+          cellpadding='2px'
+          height='40px'
+        >
+          <tr>
+            <th width='15%'>序号</th>
+            <th width='55%'>默认值</th>
+          </tr>
+        </thead>
+        <tbody height='36px'>
+          <tr
+            v-for="(item,key) in setInputTable"
+            :key="key"
+          >
+            <td>{{item.id}}</td>
+            <td></td>
+          </tr>
+        </tbody>
+      </table>
+      <div class="martop20 flexEnd marbottom10"><i
+          style="color:rgb(10, 134, 217);font-size:24px;"
+          class="el-icon-circle-plus"
+        ></i></div>
+    </div>
+
+    <el-button
+      class="martop15"
+      style="float:right;"
+      type="info"
+      size="mini"
+    >保存设置</el-button>
+  </div>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      options: [{
+        value: '选项1',
+        label: '黄金糕'
+      }, {
+        value: '选项2',
+        label: '双皮奶'
+      }, {
+        value: '选项3',
+        label: '蚵仔煎'
+      }, {
+        value: '选项4',
+        label: '龙须面'
+      }, {
+        value: '选项5',
+        label: '北京烤鸭'
+      }],
+      value: '',
+      setInputTable: [{ id: 11 }],//数据体
+    }
+  },
+  methods: {
+
+  },
+}
+</script>
+<style lang="scss" scoped>
+.table {
+  margin-top: 20px;
+  border-radius: 5px;
+
+  color: #101010;
+  font-size: 14px;
+}
+</style>