质控计划-搜索、列表静态页面开发

src/views/recordsRoom/qc/components/qualityControlPlan/SearchBox.vue

@@ -0,0 +1,232 @@
+<template>
+  <el-form style="width: 100%" ref="filterListFormRef" :model="formData" class="demo-form-inline" label-suffix=":"
+    label-width="74px">
+    <el-row :gutter="24">
+      <el-col :span="5">
+        <el-form-item label="计划名称" prop="jhmc">
+          <el-input v-model="formData.jhmc" placeholder="请输入"></el-input>
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="当前进度" prop="dqjd">
+          <el-select style="width:100%" v-model="formData.dqjd" filterable clearable placeholder="请选择">
+            <el-option label="全部" value="" />
+            <el-option label="已完成" value="1" />
+            <el-option label="未完成" value="0" />         
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="发布人" prop="fbr">
+          <el-select style="width:100%" v-model="formData.fbr" filterable clearable placeholder="请选择">
+            <el-option v-for="item of publishPeopleList" :key="item.dep_id" :label="item.name" :value="item.dep_id" />
+          </el-select>
+        </el-form-item>
+      </el-col>
+     
+      <el-col :span="7">
+        <el-form-item label="发布时间">
+          <div style="width: 100%;display: flex;gap: 5px;">
+            <el-form-item prop="fbsj_START">
+              <el-date-picker style="width: 100%" v-model="formData.fbsj_START" type="date" placeholder="开始日期"
+                :picker-options="AAC01PickerOptions" value-format="yyyyMMdd" format="yyyy年MM月dd日">
+              </el-date-picker>
+            </el-form-item>
+            <el-form-item prop="fbsj_END">
+              <el-date-picker style="width: 100%" v-model="formData.fbsj_END" type="date" placeholder="结束日期"
+                value-format="yyyyMMdd" format="yyyy年MM月dd日">
+              </el-date-picker>
+            </el-form-item>
+          </div>
+        </el-form-item>
+      </el-col>
+     
+    </el-row>
+    <el-row :gutter="24">
+      <el-col :span="7" :offset="17">
+        <el-form-item label="" prop="" style="float: right;">
+          <el-button type="primary" @click="onSubmit">查询</el-button>
+          <el-button @click="onReset">重置</el-button>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+<script>
+import moment from 'moment/moment';
+
+export default {
+  emits: ['search', 'reset'],
+  data() {
+    const that = this
+    return {
+      formData: {
+        fbsj_START: '',
+        fbsj_END: '',
+        jhmc: '',
+        fbr: '',
+        dqjd: ''
+      },
+      publishPeopleList: [],
+      AAC01PickerOptions: {
+        disabledDate: (time) => {
+          if (that.formData.fbsj_END != "") {
+            return time.getTime() > Date.now();
+          }
+        },
+        shortcuts: [{
+          text: '今天',
+          onClick(picker) {
+            picker.$emit('pick', moment().format('YYYYMMDD'));
+            that.formData.fbsj_END = moment().format('YYYYMMDD')
+          }
+        }, {
+          text: '近7天',
+          onClick(picker) {
+            picker.$emit('pick', moment().subtract(7, 'days').format('YYYYMMDD'));
+            that.formData.fbsj_END = moment().format('YYYYMMDD')
+          }
+        }, {
+          text: '近30天',
+          onClick(picker) {
+            picker.$emit('pick', moment().subtract(30, 'days').format('YYYYMMDD'));
+            that.formData.fbsj_END = moment().format('YYYYMMDD')
+          }
+        }, {
+          text: '一季度',
+          onClick(picker) {
+            picker.$emit('pick', moment().startOf('year').format('YYYYMMDD'));
+            that.formData.fbsj_END = moment().startOf('year').add(3,'M').subtract(1, 'days').format('YYYYMMDD')
+          }
+        },  {
+          text: '二季度',
+          onClick(picker) {
+            picker.$emit('pick', moment().startOf('year').add(3,'M').format('YYYYMMDD'));
+            that.formData.fbsj_END = moment().startOf('year').add(6,'M').subtract(1, 'days').format('YYYYMMDD')
+          }
+        },  {
+          text: '三季度',
+          onClick(picker) {
+            picker.$emit('pick', moment().startOf('year').add(6,'M').format('YYYYMMDD'));
+            that.formData.fbsj_END = moment().startOf('year').add(9,'M').subtract(1, 'days').format('YYYYMMDD')
+          }
+        },  {
+          text: '四季度',
+          onClick(picker) {
+            picker.$emit('pick', moment().startOf('year').add(9,'M').format('YYYYMMDD'));
+            that.formData.fbsj_END = moment().startOf('year').add(12,'M').subtract(1, 'days').format('YYYYMMDD')
+          }
+        }, {
+          text: moment().add(-2,'Y').format("YYYY"),
+          onClick(picker) {
+            picker.$emit('pick', moment().add(-2,'Y').startOf('year').format('YYYYMMDD'));
+            that.formData.fbsj_END = moment().add(-2,'Y').endOf('year').format('YYYYMMDD')
+          }
+        }, {
+          text: moment().add(-1,'Y').format("YYYY"),
+          onClick(picker) {
+            picker.$emit('pick', moment().add(-1,'Y').startOf('year').format('YYYYMMDD'));
+            that.formData.fbsj_END = moment().add(-1,'Y').endOf('year').format('YYYYMMDD')
+          }
+        }, {
+          text: moment().format("YYYY"),
+          onClick(picker) {
+            picker.$emit('pick', moment().startOf('year').format('YYYYMMDD'));
+            that.formData.fbsj_END = moment().endOf('year').format('YYYYMMDD')
+          }
+        }]
+      },
+      AAB01PickerOptions: {
+        disabledDate: (time) => {
+          if (that.formData.AAB01_END != "") {
+            return time.getTime() > Date.now();
+          }
+        },
+        shortcuts: [{
+          text: '今天',
+          onClick(picker) {
+            picker.$emit('pick', moment().format('YYYYMMDD'));
+            that.formData.AAB01_END = moment().format('YYYYMMDD')
+          }
+        }, {
+          text: '近7天',
+          onClick(picker) {
+            picker.$emit('pick', moment().subtract(7, 'days').format('YYYYMMDD'));
+            that.formData.AAB01_END = moment().format('YYYYMMDD')
+          }
+        }, {
+          text: '近30天',
+          onClick(picker) {
+            picker.$emit('pick', moment().subtract(30, 'days').format('YYYYMMDD'));
+            that.formData.AAB01_END = moment().format('YYYYMMDD')
+          }
+        }, {
+          text: '一季度',
+          onClick(picker) {
+            picker.$emit('pick', moment().startOf('year').format('YYYYMMDD'));
+            that.formData.AAB01_END = moment().startOf('year').add(3,'M').subtract(1, 'days').format('YYYYMMDD')
+          }
+        },  {
+          text: '二季度',
+          onClick(picker) {
+            picker.$emit('pick', moment().startOf('year').add(3,'M').format('YYYYMMDD'));
+            that.formData.AAB01_END = moment().startOf('year').add(6,'M').subtract(1, 'days').format('YYYYMMDD')
+          }
+        },  {
+          text: '三季度',
+          onClick(picker) {
+            picker.$emit('pick', moment().startOf('year').add(6,'M').format('YYYYMMDD'));
+            that.formData.AAB01_END = moment().startOf('year').add(9,'M').subtract(1, 'days').format('YYYYMMDD')
+          }
+        },  {
+          text: '四季度',
+          onClick(picker) {
+            picker.$emit('pick', moment().startOf('year').add(9,'M').format('YYYYMMDD'));
+            that.formData.AAB01_END = moment().startOf('year').add(12,'M').subtract(1, 'days').format('YYYYMMDD')
+          }
+        }, {
+          text: moment().add(-2,'Y').format("YYYY"),
+          onClick(picker) {
+            picker.$emit('pick', moment().add(-2,'Y').startOf('year').format('YYYYMMDD'));
+            that.formData.AAB01_END = moment().add(-2,'Y').endOf('year').format('YYYYMMDD')
+          }
+        }, {
+          text: moment().add(-1,'Y').format("YYYY"),
+          onClick(picker) {
+            picker.$emit('pick', moment().add(-1,'Y').startOf('year').format('YYYYMMDD'));
+            that.formData.AAB01_END = moment().add(-1,'Y').endOf('year').format('YYYYMMDD')
+          }
+        }, {
+          text: moment().format("YYYY"),
+          onClick(picker) {
+            picker.$emit('pick', moment().startOf('year').format('YYYYMMDD'));
+            that.formData.AAB01_END = moment().endOf('year').format('YYYYMMDD')
+          }
+        }]
+      },
+    }
+  },
+  created() {
+    this.getDeportmentList()
+  },
+  methods: {
+    onSubmit() {
+      this.$emit('search')
+    },
+    onReset() {
+      this.$refs.filterListFormRef.resetFields();
+      this.$emit('reset')
+    },
+    getDeportmentList() {
+      this.$axios.get('/user/depDropDown').then(res => {
+        const { data } = res
+        this.publishPeopleList = data;
+      }).catch(error => {
+        console.log(error)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>

src/views/recordsRoom/qc/components/qualityControlPlan/TableBox.vue

@@ -0,0 +1,169 @@
+<template>
+  <el-table
+    v-loading="loading"
+    :data="data"
+    style="width: 100%"
+    @selection-change="handleSelectionChange"
+  >
+    <!-- <el-table-column type="selection" width="55"></el-table-column> -->
+    <el-table-column type="index" label="序号" width="80" />
+    <el-table-column prop="AAA28" label="计划名称" width="180">
+      <template slot-scope="scope">
+        <el-button class="blue-link" type="text" @click="toPage(scope.row)">{{ scope.row.AAA28 }}</el-button>
+      </template>
+    </el-table-column>
+    <el-table-column
+      prop=""
+      label="进度条"
+      width="220"
+      show-overflow-tooltip>
+      <template slot-scope="scope">
+        <el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
+        <el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress>
+        <el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></el-progress>
+        <el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress>
+      </template>
+    </el-table-column>
+    <el-table-column
+      prop=""
+      label="质控计划周期"
+      width="220"
+    >
+      <template slot-scope="scope">
+        <span>2020-10-10</span>&nbsp;至&nbsp;<span>2020-10-10</span>
+      </template>
+    </el-table-column>
+    <el-table-column
+      width="120"
+      prop="appeal_docter"
+      label="发布人"
+    />
+    <el-table-column
+      width="160"
+      prop="appeal_time"
+      label="发布时间"
+    >
+      <template slot-scope="scope">
+        <span>{{scope.row.appeal_time ? moment(scope.row.appeal_time * 1000).format('YYYY-MM-DD HH:MM:ss') : ''}}</span>
+      </template>
+    </el-table-column>
+    <el-table-column prop="" label="操作">
+      <template slot-scope="scope">
+        <el-button type="text" icon="el-icon-edit"></el-button>
+        <el-button type="text" style="color:#ef1f3a" icon="el-icon-delete"></el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+import moment from 'moment/moment';
+
+export default {
+  props: {
+    data: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    loading: {
+      type: Boolean,
+      default() {
+        return false;
+      },
+    }
+  },
+  data() {
+    return {
+      selectedArray: []
+    }
+  },
+  methods: {
+    moment,
+    toPage(row) {
+      const { ZYH } = row;
+      this.$router.push({ path: '/qc/caseViews', query: {
+        ZYH,
+        from: 'review'
+      }, meta: {
+        title: '申诉详情'
+      }});
+    },
+
+    handleSelectionChange(val) {
+      this.selectedArray = val;
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+// ::v-deep.el-table {
+//   .selected-row {
+//     background-color:#ecf5ff !important;
+//   }
+// }
+
+@mixin status() {
+    width: 60px;
+    text-align: center;
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 4px;
+    font-weight: 500
+}
+
+.status-0 {
+  @include status();
+  background-color: #fccbd4;
+  border-color: #ef1f3a;
+  color: #ef1f3a;
+}
+.status-1 {
+  @include status();
+  background-color: #d2e4d6;
+  border-color: #318240;
+  color: #318240;
+}
+.status-2 {
+  @include status();
+  background-color: #ef1f3a;
+  border-color: #ef1f3a;
+  color: #ffffff;
+}
+
+@mixin score-level() {
+    font-weight: 500
+}
+
+.score-level-1 {
+  @include score-level();
+  color: #318240;
+}
+.score-level-2 {
+  @include score-level();
+  color: #89c30f;
+}
+.score-level-3 {
+  @include score-level();
+  color: #ec890e;
+}
+.score-level-4 {
+  @include score-level();
+  color: #ef1f3a;
+}
+
+.quality-type-1 {
+  @include score-level();
+  color: #07818a;
+}
+.quality-type-2 {
+  @include score-level();
+  color: #3c108f;
+}
+.quality-type-3 {
+  @include score-level();
+  color: #a26d0a
+}
+</style>

src/views/recordsRoom/qc/qualityControlPlan.vue

@@ -0,0 +1,86 @@
+<template>
+    <div class="app-container">
+      <SearchBoxVue class="filter-list-form" ref="SearchBoxRef" @search="handleSearch" @reset="handleReset" />
+      <div class="filter-list-action">
+        <el-row type="flex" justify="space-between" align="middle">
+          <mPagination v-if="tableData && tableData.length !== 0" :data="paginationData" @pageChangeEvent="pageHasChanged"></mPagination>
+          <el-row type="flex" justify="end" style="flex:1">
+            <el-button @click="openAddPlanModal" type="primary">新建计划</el-button>
+          </el-row>
+        </el-row>
+        <TableBoxVue :loading="loading" :data="tableData" ref="tableRef"/>
+      </div>
+      <AddPlanModalBoxVue ref="AddPlanModalBoxVueRef" @onUpdate="getList"/>
+    </div>
+  </template>
+  
+  <script>
+  import mPagination from '@/components/m-pagination';
+  import SearchBoxVue from '@/views/recordsRoom/qc/components/qualityControlPlan/SearchBox.vue'
+  import TableBoxVue from '@/views/recordsRoom/qc/components/qualityControlPlan/TableBox.vue'
+  import AddPlanModalBoxVue from '@/views/recordsRoom/qc/components/qualityControlPlan/AddPlanModal.vue'
+  import pagination from '@/components/Pagination/index2.vue'
+  import { getCaseAppealList } from '@/api/admin'
+  
+  export default {
+    components: {
+      mPagination,
+      SearchBoxVue,
+      TableBoxVue,
+      pagination,
+      AddPlanModalBoxVue
+    },
+    data() {
+      return {
+        loading: false,
+        tableData: [],
+        paginationData: {
+          total: 0,
+          currentPage: 1,
+          pageSize: 10
+        },
+      }
+    },
+    created() {
+    },
+    mounted() {
+      this.getList()
+    },
+    methods: {
+      getList() {
+        this.loading = true
+        getCaseAppealList({
+          ...this.$refs.SearchBoxRef.formData,
+          page: this.paginationData.currentPage,
+          page_size: this.paginationData.pageSize
+        }).then(res => {
+          this.paginationData.total = res.data.count
+          this.tableData = res.data.list
+          this.$refs.tableRef.selectedArray = []
+        }).catch(error => {
+          console.log(error)
+        }).finally(() => {
+          this.loading = false
+        })
+      },
+  
+      pageHasChanged() {
+        this.getList()
+      },
+      handleSearch() {
+        this.paginationData.currentPage = 1
+        this.getList()
+      },
+      handleReset() {
+        this.handleSearch()
+      },
+      openAddPlanModal() {
+        this.$refs.AddPlanModalBoxVueRef.openModal()
+      }
+    }
+  }
+  </script>
+  
+  <style lang="scss" scoped>
+  </style>
+