销售出库页面开发

gaoluyang

3 天以前 d13487486a3c3c7cf93bd3bda65dcc0d6af51aa2

销售出库页面开发

 src/components/Table/ETable.vue

@@ -172,9 +172,8 @@
  </script>
  
  <style scoped>
  :deep(.el-table) {
    margin-bottom: 20px;
    overflow-x: auto;
  .el-table {
    margin: 20px 0 !important;
  }
  
  :deep(.el-table th) {

 src/views/salesOutbound/components/formDia.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,133 @@
<template>
  <div>
    <el-dialog :title="operationType === 'add' ? '新增出库' : '编辑出库'"
               v-model="dialogVisitable" width="800px" @close="cancel">
      <el-form :model="form" :rules="rules" ref="userRef" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="销售日期" prop="userName">
              <el-date-picker
                  v-model="form.userName"
                  type="date"
                  value-format="YYYY-MM-DD"
                  format="YYYY-MM-DD"
                  clearable
                  style="width: 100%"
                  placeholder="请选择日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户" prop="nickName">
              <el-select v-model="form.nickName" placeholder="请选择客户">
                <el-option
                    v-for="item in customerOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="煤种" prop="type">
              <el-select v-model="form.nickName" placeholder="请选择煤种">
                <el-option
                    v-for="item in typeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位" prop="nickName">
              <el-input v-model="form.nickName" placeholder="请输入单位" maxlength="30" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="销售数量" prop="userName">
              <el-input v-model="form.userName" placeholder="请输入销售数量" maxlength="30" type="number" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="销售单价" prop="userName">
              <el-input v-model="form.userName" placeholder="请输入销售单价(含税)" maxlength="30" type="number" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="销售总价" prop="userName">
              <el-input v-model="form.userName" placeholder="请输入销售总价(含税)" maxlength="30" type="number" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="热值" prop="userName">
              <el-input v-model="form.userName" placeholder="请输入热值" maxlength="30" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="submitForm">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref, reactive} from "vue";
const { proxy } = getCurrentInstance()
const emit = defineEmits()

const dialogVisitable = ref(false);
const operationType = ref('add');
const customerOptions = ref([]) // å®¢æˆ·ä¸‹æ‹‰æ¡†
const typeOptions = ref([]) // ç…¤ç§ä¸‹æ‹‰æ¡†
const data = reactive({
  form: {},
  rules: {
    userName: [{ required: true, message: "登录账号不能为空", trigger: "blur" },],
    nickName: [{ required: true, message: "用户姓名不能为空", trigger: "blur" }],
    roleIds: [{ required: true, message: "角色不能为空", trigger: "change" }],
    deptId: [{ required: true, message: "部门不能为空", trigger: "change" }],
    password: [{ required: true, message: "用户密码不能为空", trigger: "blur" }, { min: 5, max: 20, message: "用户密码长度必须介于 5 å’Œ 20 ä¹‹é—´", trigger: "blur" }, { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }],
  }
})

const { form, rules } = toRefs(data)

// æ‰“开弹框
const openDialog = (type, row) => {
  console.log('openDialog', type, row)
  dialogVisitable.value = true
}
// æäº¤åˆå¹¶è¡¨å•
const submitForm = () => {
  proxy.$refs["userRef"].validate(valid => {
    if (valid) {
    
    }
  })
}
// å…³é—­åˆå¹¶è¡¨å•
const cancel = () => {
  proxy.resetForm("userRef")
  dialogVisitable.value = false
  emit('closeDia')
}
defineExpose({ openDialog })
</script>

<style scoped>

</style>

 src/views/salesOutbound/index.vue

@@ -50,24 +50,67 @@
      </el-tabs>
      <!-- æ“ä½œæŒ‰é’®åŒº -->
      <el-space>
        <el-button type="primary" :icon="Plus" @click="handleAdd">新建</el-button>
        <el-button type="primary" :icon="Plus" @click="openDia('add')">新建</el-button>
        <el-button type="danger" :icon="Delete" @click="handleDelete">删除</el-button>
        <el-button type="info" :icon="Download" @click="handleExport">导出</el-button>
        <el-button type="info" plain :icon="Download" @click="handleExport">导出</el-button>
      </el-space>
      <!-- è¡¨æ ¼ç»„件 -->
      <div>
        <ETable :loading="tableLoading"
                :table-data="tableData"
                :columns="columns"
                @selection-change="handleSelectionChange"
                :show-selection="true"
                :border="true"
                :maxHeight="480"
                @edit="openDia"></ETable>
      </div>
      <pagination
          v-if="total>0"
          :page-num="pageNum"
          :page-size="pageSize"
          :total="total"
          @pagination="handleQuery"
          :layout="'total, prev, pager, next, jumper'"
      />
    </el-card>
    <form-dia ref="formDia" @closeDia="handleQuery"></form-dia>
  </div>
</template>

<script setup>
import {ref, reactive} from "vue";
const { proxy } = getCurrentInstance()
import {Delete, Download, Plus} from "@element-plus/icons-vue";
import ETable from "@/components/Table/ETable.vue";
import Pagination from "@/components/Pagination/index.vue";
import FormDia from "@/views/salesOutbound/components/formDia.vue";

const formDia = ref()
const activeTab = ref("out");
// æ ‡ç­¾é¡µæ•°æ®
const tabs = reactive([
  { name: "out", label: "销售出库" },
]);
// è¡¨æ ¼æ•°æ®
const tableLoading = ref(false);
const tableData = ref([]);
const columns = ref([
  { prop: "supplierName", label: "销售日期", minWidth: 160 },
  { prop: "identifyNumber", label: "客户", minWidth: 120 },
  { prop: "address", label: "煤种", minWidth: 150 },
  { prop: "unit", label: "单位", minWidth: 150 },
  { prop: "bank", label: "库存数量", minWidth: 120 },
  { prop: "bankAccount", label: "单价(含税)", minWidth: 150 },
  { prop: "contacts", label: "总价(含税)", minWidth: 100 },
  { prop: "contactAddress", label: "热值", minWidth: 150 },
  { prop: "maintainer", label: "维护人", minWidth: 100 },
  { prop: "maintainDate", label: "维护日期", minWidth: 100 },
]);
const selectedRows = ref([]);
const total = ref(0);
const pageNum = ref(1);
const pageSize = ref(10);
// æŸ¥è¯¢å‚æ•°
const queryParams = reactive({
  searchText: "",
@@ -93,8 +136,10 @@
  handleQuery();
};
// æ–°å¢žå‡ºåº“
const handleAdd = () => {

const openDia = (type, row) => {
  nextTick(() => {
    formDia.value?.openDialog(type, row)
  })
};
// åˆ é™¤å‡ºåº“
const handleDelete = () => {
@@ -104,6 +149,10 @@
const handleExport = () => {

};
// é€‰æ‹©è¡Œ
const handleSelectionChange = (selection) => {
  selectedRows.value = selection;
};
</script>

<style scoped>