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

<template>
  <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="primary" style="float: right" @click="onSubmit">生成账单</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <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="primary"
                   size="small"
                   icon="el-icon-upload2"
                   plain
                   @click="handleDelete">新增明细
        </el-button>
        <el-button type="primary"
                   size="small"
                   icon="el-icon-upload2"
                   plain
                   @click="handleDelete">导 出
        </el-button>
        <el-button type="primary"
                   size="small"
                   icon="el-icon-upload2"
                   plain
                   @click="handleDelete">打 印
        </el-button>
        <el-button type="primary"
                   size="small"
                   icon="el-icon-upload2"
                   plain
                   @click="handleDelete">新 增
        </el-button>
        <el-button type="primary"
                   size="small"
                   icon="el-icon-upload2"
                   plain
                   @click="handleDelete">请 核
        </el-button>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
  import option from "./configuration/mainList.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);
      },
    }
  };
</script>

<style></style>