Smart_platform_ui/src/views/workManagement/main-items/detailsPage.vue

<template>
  <div class="borderless">
    <div class="customer-head">
      <div class="customer-back">
        <el-button type="danger" style="border: none;background: none;color: red" icon="el-icon-arrow-left"
                   @click="backToList">返回列表
        </el-button>
      </div>
    </div>
    <div style="margin-top: 60px">
      <basic-container>
        <el-form :model="form" ref="form" label-width="130px">
          <el-row>
            <el-col v-for="(item, index) in basicData.column" :span="item.span?item.span:6" :key="index">
              <el-form-item :label="item.label" :prop="item.prop" :rules="item.rules">
                <el-date-picker v-if="item.type === 'datetime'" style="width: 100%;" v-model="form[item.prop]" size="small" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss"/>
                <el-select v-else-if="item.type === 'select'" style="width: 100%" size="small" placeholder="请选择" clearable filterable></el-select>
                <el-input type="age" v-else v-model="form[item.prop]" size="small" autocomplete="off" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item>
                <el-button type="info" style="float: right" @click="">生成账单</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </basic-container>
      <basic-container>
        <avue-crud
          ref="crud"
          :data="data"
          :option="optionTable"
          :page.sync="page"
          :table-loading="loading"
          @row-del="rowDel"
          @row-update="rowUpdate"
          @row-save="rowSave"
          @size-change="sizeChange"
          @current-change="currentChange"
          @search-change="searchChange"
          @refresh-change="refreshChange"
          @cell-dblclick="cellDblclick"
          @on-load="getList"
          @saveColumn="saveColumn"
        >
          <template slot="menuLeft">
            <el-button type="success"
                       size="small"
                       icon="el-icon-plus"
                       plain
                       @click="">新增明细
            </el-button>
            <el-button type="primary"
                       size="small"
                       icon="el-icon-arrow-right"
                       plain
                       @click="">导 出
            </el-button>
            <el-button type="primary"
                       size="small"
                       plain
                       @click="">打 印
            </el-button>
            <el-button type="success"
                       size="small"
                       icon="el-icon-plus"
                       plain
                       @click="">新 增
            </el-button>
            <el-button type="info"
                       size="small"
                       plain
                       @click="">请 核
            </el-button>
          </template>
        </avue-crud>
      </basic-container>
    </div>
  </div>
</template>

<script>
  import option from "./configuration/detailsPage.json";
  export default {
    data() {
      return {
        loading: false,
        form:{},
        data: [],
        optionTable: option,
        //顶部from数据
        basicData: {
          column: [
            {
              label: '系统编号',
              prop: 'prop1',
              rules: [
                {
                  required: false,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            }, {
              label: '制单日期',
              prop: 'prop2',
              rules: [
                {
                  required: true,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            }, {
              label: '制单人',
              prop: 'prop3',
              data: [],
              rules: [
                {
                  required: true,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            }, {
              label: '项目代码',
              prop: 'prop3',
              data: [],
              rules: [
                {
                  required: true,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            }, {
              label: '项目名称',
              prop: 'prop4',
              rules: [
                {
                  required: true,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            }, {
              label: '客户名称',
              prop: 'prop5',
              rules: [
                {
                  required: true,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            }, {
              label: '责任人',
              prop: 'prop6',
              data: [],
              rules: [
                {
                  required: true,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            }, {
              label: '电话',
              prop: 'prop7',
              data: [],
              rules: [
                {
                  required: true,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            }, {
              label: '承揽人',
              prop: 'prop8',
              data: [],
              rules: [
                {
                  required: true,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            }, {
              label: '合同金额',
              prop: 'prop8',
              rules: [
                {
                  required: true,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '预收金额',
              prop: 'prop9',
              rules: [
                {
                  required: true,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '未收金额',
              prop: 'prop10',
              rules: [
                {
                  required: true,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '开始日期',
              prop: 'prop11',
              type:'datetime',
              rules: [
                {
                  required: true,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '结束日期',
              prop: 'prop12',
              type:'datetime',
              rules: [
                {
                  required: true,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '收款方式',
              prop: 'prop13',
              type:'select',
              rules: [
                {
                  required: true,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '备注',
              prop: 'prop8',
              rules: [
                {
                  required: true,
                  message: ' ',
                  trigger: 'blur'
                }
              ]
            }
          ],
        },
        page: {
          currentPage: 1,
          total: 0,
          pageSize: 10
        }
      };
    },
    methods: {
      //删除列表后面的删除按钮触发触发(row, index, done)
      rowDel(row, index, done) {
        this.$confirm("确定将选择数据删除?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          // 数据回调进行刷新
          done(row);
        });
      },
      //修改时的修改按钮点击触发
      rowUpdate(row, index, done, loading) {
        setTimeout(() => {
          this.$message.success("修改成功");
          loading();
          done();
        }, 1000);
      },
      //新增修改时保存触发
      rowSave(row, done, loading) {
        setTimeout(() => {
          this.$message.success("保存成功");
          loading();
          done();
        }, 1000);
      },
      getList() {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.data = [
            {
              prop1: "食品许可",
              prop2: "500",
              prop3: "次",
              prop4: "1",
              prop5: "1500",
              prop6: "1500",
              prop7: "年",
              prop8: "202202-1-1",
              prop9: "效率高",
              prop10: "商务部",
              prop11: "老周",
              prop12: "2021-1-1",
              prop13: "2021-1-1",
              prop14: "LOL",
              prop15: "2021-1-1",
              prop16: "LOL",
              prop17: "2021-1-1"
            }
          ];
          this.page.total = 1;
        }, 1000);
      },
      searchChange(params, done) {
        this.getList(this.page, params);
        done();
      },
      sizeChange(val) {
        this.page.pageSize = val;
        this.getList();
      },
      currentChange(val) {
        this.page.currentPage = val;
        this.getList();
      },
      refreshChange() {
        this.page.currentPage = 1;
        this.getList();
      },
      cellDblclick(row, column, cell, event) {
        console.log(row, column, cell, event);
        this.$refs.crud.rowEdit(row);
      },
      saveColumn(row, column) {
        console.log(row, column);
      },
      //返回主营项目列表
      backToList(){
        this.$router.$avueRouter.closeTag();
        this.$router.push({
          path: '/workManagement/main-items/list',
          query: {}
        });
      }
    }
  };
</script>

<style scoped lang="scss">
  .customer-head {
    position: fixed;
    top: 105px;
    width: 100%;
    margin-left: -10px;
    height: 62px;
    background: #ffffff;
    box-shadow: 0 4px 12px 0px rgba(232, 232, 235, 1);
    z-index: 999;
  }

  .customer-back {
    cursor: pointer;
    line-height: 62px;
    font-size: 16px;
    color: #323233;
    font-weight: 400;
  }
</style>