Smart_platform_ui/src/views/workManagement/receipt/settleAccountsEdit.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>
      <el-button
        class="el-button--small-yh add-customer-btn"
        type="primary"
        @click=""
      >{{form.id?'确认修改':'确认新增'}}
      </el-button>
    </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-row>
        </el-form>
      </basic-container>
    </div>
  </div>
</template>

<script>
  import option from "./configuration/settleAccounts.json";
  export default {
    data() {
      return {
        loading: false,
        form:{},
        data: [],
        //顶部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/receipt/settleAccounts',
          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;
  }

  .add-customer-btn {
    position: fixed;
    right: 36px;
    top: 115px;
  }
</style>