factory_web/src/views/sam/order.vue

<template>
    <el-container>
      <el-header>
        <div class="left-panel">
          <el-input
              v-model="query.search"
              placeholder="名称"
              clearable
              style="margin-right: 5px;"
            ></el-input>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="handleQuery"
            ></el-button>
        </div>
        <div class="right-panel">
          <el-button type="primary" icon="el-icon-plus" @click="add" v-auth="'order.delete'"></el-button>
        </div>
      </el-header>
      <el-main class="nopadding">
        <scTable
          ref="table"
          :apiObj="apiObj"
          row-key="id"
          stripe
          :params="query"
        >
          <el-table-column type="index" width="50"/>
          <el-table-column label="订单编号" prop="number">
          </el-table-column>
          <el-table-column label="状态" prop="state">
            <template #default="scope">
              <span><el-tag :type="stateOption[scope.row.state].color">{{stateOption[scope.row.state]}}</el-tag></span>
            </template>
          </el-table-column>
          <el-table-column label="客户" prop="customer"  show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="所属合同" prop="contract"  show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="截止到货日期" prop="delivery_date">
          </el-table-column>
          <el-table-column label="提交时间" prop="submit_time">
          </el-table-column>
          <el-table-column label="创建人" prop="create_by">
          </el-table-column>
          <el-table-column label="备注">
            <template #default="scope">{{ scope.row.description }}</template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" align="center" width="200">
            <template #default="scope">
              <el-link
                type="primary"
                @click="table_detail(scope.row)"
                v-auth="'order.update'"
              >
              详情
              </el-link>
              <el-divider direction="vertical"></el-divider>
              <el-link
                type="primary"
                @click="table_submit(scope.row)"
                v-auth="'order.update'"
                :disabled="scope.row.state!==10"
              >
              提交
              </el-link>
              <el-divider direction="vertical"></el-divider>
              <el-link
                type="primary"
                @click="table_edit(scope.row)"
                v-auth="'order.update'"
              >
                编辑
              </el-link>
              <el-divider direction="vertical"></el-divider>
              <el-link
                type="danger"
                @click="table_del(scope.row)"
                v-auth="'order.delete'"
              >
                删除
              </el-link>
            </template>
          </el-table-column>
        </scTable>
      </el-main>
    </el-container>
    <save-dialog
      v-if="dialog.save"
      ref="saveDialog"
      @success="handleSaveSuccess"
      @closed="dialog.save = false"
    ></save-dialog>
  </template>
  <script>
  import saveDialog from "./order_form.vue";
  export default {
    name: "rparty",
    components: {
        saveDialog,
    },
    data() {
      return {
        dialog: {
          save: false,
        },
        apiObj: this.$API.sam.order.list,
        query: {
          page:1,
          page_size:20
        },
        selection: [],
        stateOption: {
            10: '创建中',
            20: '已提交',
            30: '已排产',
            50: '已交付',
          },
      };
    },
    methods: {
      //添加
      add() {
        this.dialog.save = true;
        this.$nextTick(() => {
          this.$refs.saveDialog.open("add");
        });
      },
      //编辑
      table_edit(row) {
        this.dialog.save = true;
        this.$nextTick(() => {
          this.$refs.saveDialog.open("edit").setData(row);
        });
      },
      table_submit(row){
        this.$API.sam.order.submit.req(row.id).then((res) => {
          this.$message.success("提交成功");
          return res;
        }).catch((err) => {
          return err;
        });
      },
      //查看
      table_detail(row) {
        this.$router.push({
            name: "samOrderitem",
            query:{order:row.id}
            
          });
      },
      //删除
      async table_del(row) {
        this.$confirm(`确定删除吗？`, "提示", {
        type: "warning",
        }).then(() => {
            this.$API.sam.order.delete.req(row.id).then((res) => {
                this.$message.success("删除成功");
                return res;
            }).catch((err) => {
                return err;
            });
        }).catch(() => {});
      },
  
      //本地更新数据
      handleSaveSuccess(data, mode) {
        if (mode == "add") {
          this.$refs.table.refresh();
        } else if (mode == "edit") {
          this.$refs.table.refresh();
        }
      },
      handleQuery() {
                  this.$refs.table.queryData(this.query)
              },
      resetQuery() {
        this.query = {};
      },
    },
  };
  </script>