qms/src/views/modules/supplier/qmsSupplierProjectList.vue

<!--
 * @Author: Do not edit
 * @Date: 2023-06-20 11:16:51
 * @LastEditTime: 2023-07-04 09:53:30
 * @LastEditors: DY
 * @Description: 项目清单
-->
<template>
  <el-card shadow="never" class="aui-card--fill">
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="标题">
          <el-input v-model="formInline.title" placeholder="标题"></el-input>
        </el-form-item>
        <el-form-item label="物料">
          <el-select v-model="formInline.productId" filterable clearable placeholder="物料">
            <el-option
              v-for="item in productList"
              :key="item.id"
              :label="item.productName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="供应商">
          <el-select v-model="formInline.supplierId" filterable clearable placeholder="供应商">
            <el-option
              v-for="item in supplierList"
              :key="item.id"
              :label="item.supplierTypeName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="formInline.status">
            <el-radio-button :label="2">全部</el-radio-button>
            <el-radio-button :label="1">已完成</el-radio-button>
            <el-radio-button :label="0">实施中</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker
            v-model="timeSlot"
            type="daterange"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-button class="carcleButton" @click="addButon">+</el-button>
    </div>
    <add-projects v-if="addtModelVisible" @refreshDataList="onSubmit"></add-projects>
  </el-card>
</template>

<script>
import addProjects from './components/addProjects.vue';

export default {
  components: { addProjects },
  data() {
    return {
      urlOptions: {
        addURL: '/supplier/qmsEvaluationPlan',
        getProductURL: '/basic/qmsProduct/page',
        getSupplierURL: '/supplier/qmsSupplier/page',
        getPageURL: '/supplier/qmsSupplierProjectList/page'
      },
      formInline: {
        limit: 999,
        page: 1,
        title: '',
        productId: '',
        supplierId: '',
        ment: undefined,
        status: 2,
        startTime: undefined,
        endTime: undefined
      },
      timeSlot: null,
      productList: [],
      supplierList: [],
      tableData: [],
      dataListLoading: false,
      addtModelVisible: false
    }
  },
  mounted() {
    this.getProductList();
    this.getSupplier();
  },
  methods: {
    addButon() {
      this.addtModelVisible = true
    },
    onSubmit() {
      this.formInline.ment = this.formInline.status === 2 ? undefined : this.formInline.status
      if (this.timeSlot) {
        this.formInline.startTime = this.timeSlot[0]
        this.formInline.endTime = this.timeSlot[1]
      } else {
        this.formInline.startTime = undefined
        this.formInline.endTime = undefined
      }
      console.log('nihcdawowk', this.formInline)
      this.$http
        .get(this.urlOptions.getPageURL, {
          params: this.formInline,
        })
        .then(({ data: res }) => {
          this.dataListLoading = false;
          if (res.code !== 0) {
            this.tableData = [];
            this.formInline.total = 0;
            return this.$message.error(res.msg);
          }
          this.tableData = res.data.list;
          this.formInline.total = res.data.total;
        })
        .catch(() => {
          this.dataListLoading = false;
        });
    },
    getProductList() {
      this.$http
        .get(this.urlOptions.getProductURL, {
          params: {
            limit: 999,
            page: 1
          },
        })
        .then(({ data: res }) => {
          this.dataListLoading = false;
          if (res.code !== 0) {
            this.productList = [];
            return this.$message.error(res.msg);
          }
          this.productList = res.data.list;
        })
        .catch(() => {
          this.dataListLoading = false;
        });
    },
    getSupplier() {
      this.$http
        .get(this.urlOptions.getSupplierURL, {
          params: {
            limit: 999,
            page: 1
          },
        })
        .then(({ data: res }) => {
          this.dataListLoading = false;
          if (res.code !== 0) {
            this.supplierList = [];
            return this.$message.error(res.msg);
          }
          this.supplierList = res.data.list;
        })
        .catch(() => {
          this.dataListLoading = false;
        });
    }
  }
}
</script>

<style scoped>
  .carcleButton {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin: 5px;
    background-color: rgb(196, 193, 193);
  }
</style>