gaoshp
2024-04-07 f95cb3403f98d2202343832f37b514ba48f755e2
src/views/console/workstation/index.vue
@@ -18,55 +18,90 @@
                  <el-container>
                     <el-header>
                        <div class="left-panel">
                           <el-button type="primary" icon="el-icon-plus"></el-button>
                           <el-button @click="table_add" type="primary" icon="el-icon-plus"></el-button>
                           <el-button type="danger" plain icon="el-icon-delete"></el-button>
                           <el-button type="primary" plain>导入</el-button>
                           <el-button type="primary" plain>批量操作</el-button>
                           <!-- <el-button type="primary" plain>导入</el-button>
                           <el-button type="primary" plain>批量操作</el-button> -->
                        </div>
                        <div class="right-panel">
                           <div class="right-panel-search">
                              <el-select v-model="value" placeholder="Select" style="width: 240px">
                                 <el-option v-for="item in options" :key="item.value" :label="item.label"
                              <span>类型</span>
                              <el-select v-model="type" style="width: 240px">
                                 <el-option v-for="item in types" :key="item.value" :label="item.label"
                                    :value="item.value" />
                              </el-select>
                              <el-select v-model="value" placeholder="Select" style="width: 240px">
                                 <el-option v-for="item in options" :key="item.value" :label="item.label"
                              <span>状态</span>
                              <el-select v-model="statu" style="width: 240px">
                                 <el-option v-for="item in status" :key="item.value" :label="item.label"
                                    :value="item.value" />
                              </el-select>
                              <el-input style="width: 240px" placeholder="请输入工位名称/编号" clearable></el-input>
                              <el-button type="primary" icon="el-icon-search"></el-button>
                              <el-input v-model="keyWord" style="width: 240px" placeholder="请输入工位名称/编号" clearable></el-input>
                              <el-button @click="search" type="primary" icon="el-icon-search"></el-button>
                           </div>
                        </div>
                     </el-header>
                     <el-main class="nopadding">
                        <scTable ref="table" :params="params" :apiObj="apiObj"
                     <div style="display: flex">
                        <scTable highlight-current-row @dataChange="dataChange" @row-click="rowClick" ref="table" :params="params" :apiObj="apiObj"
                           @selection-change="selectionChange" stripe>
                           <el-table-column type="selection" width="50"></el-table-column>
                           <el-table-column label="工位编号" prop="id" width="120"
                           <el-table-column label="工位编号" prop="code" width="120"
                              sortable='custom'></el-table-column>
                           <el-table-column label="工位名称" prop="id" width="120"
                           <el-table-column label="工位名称" prop="name" width="120"
                              sortable='custom'></el-table-column>
                           <el-table-column label="工位类型" prop="id" width="120"
                           <el-table-column label="工位类型" prop="type" width="120"
                              sortable='custom'></el-table-column>
                           <el-table-column label="工位日历" prop="id" width="120"
                           <el-table-column label="工位日历" prop="calendarName" width="120"
                              sortable='custom'></el-table-column>
                           <el-table-column label="操作" fixed="right" align="right" width="160">
                              <template #default="scope">
                                 <el-button-group>
                                    <el-button text type="primary" size="small"
                                       @click="table_show(scope.row, scope.$index)">查看</el-button>
                                    <el-button text type="primary" size="small"
                                       @click="table_edit(scope.row, scope.$index)">编辑</el-button>
                                    <el-popconfirm title="确定删除吗?"
                                       @confirm="table_del(scope.row, scope.$index)">
                                       @confirm="table_del(scope.row, scope.$index, '0')">
                                       <template #reference>
                                          <el-button text type="primary" size="small">删除</el-button>
                                       </template>
                                    </el-popconfirm>
                                    <el-popconfirm title="确定停用吗?"
                                       @confirm="table_del(scope.row, scope.$index,'1')">
                                       <template #reference>
                                          <el-button text type="primary" size="small">停用</el-button>
                                       </template>
                                    </el-popconfirm>
                                 </el-button-group>
                              </template>
                           </el-table-column>
                        </scTable>
                        <div style="margin-left: 14px" v-if="Object.keys(previewData).length > 0">
                           <div class="header">
                              <p class="preview-title">工位信息</p>
                              <div class="preview-content">
                                 <div class="img">
                                    <img :src="machinePng" alt="">
                                 </div>
                                 <ul>
                                    <li>工位编号 {{previewData.code}}</li>
                                    <li>工位组 {{previewData.groupName}}</li>
                                    <li>工位名称 {{previewData.name}}</li>
                                    <li>工位类型 {{previewData.type}}</li>
                                    <li>工位日历 {{previewData.calendarName}}</li>
                                    <li>状态 {{previewData.status}}</li>
                                 </ul>
                              </div>
                              <el-tabs tab-position="top" class="custom-tabs" v-model="normal">
                                 <el-tab-pane label="机器信息" name="1">
                                    机器信息
                                 </el-tab-pane>
                                 <el-tab-pane label="扩展信息" name="2">
                                    扩展信息
                                 </el-tab-pane>
                              </el-tabs>
                           </div>
                        </div>
                     </div>
                     </el-main>
                  </el-container>
               </el-container>
@@ -202,22 +237,58 @@
         </el-tabs>
      </el-card>
      <Dialog ref="dialog" :option="{types,status,group}"></Dialog>
   </el-main>
</template>
<script>
import pmsPng from '@/assets/pms.png'
import Dialog from './Dialog.vue'
import machinePng from '@/assets/machine.png'
export default {
   name: 'system',
   components: {
      Dialog
   },
   data() {
      return {
         machinePng,
         showGrouploading: false,
         options: [],
         activeName: '1',
         normal: '1',
         group: [],
         groupFilterText: '',
         apiObj: '',
         params: {},
         keyWord: '',
         type: '',
         statu: '1',
         types: [
            {
               label: '所有',
               value: ''
            },
            {
               label: '机器',
               value: '0'
            },
            {
               label: '人工',
               value: '1'
            },
         ],
         status: [
            {
               label: '启用',
               value: '1'
            },
            {
               label: '停用',
               value: '0'
            }
         ],
         previewData: {},
         // --------
         form: {
            groupTag: '',
@@ -376,42 +447,79 @@
      groupClick(node) {
         this.treeCheckedNode = node
      },
      search () {
         this.groupClick1(this.treeCheckedNode)
      },
      rowClick (data) {
         this.previewData = data
         console.log(data)
      },
      groupClick1(data) {
         console.log('-------', data)
         var params = {
            groupId: data.id,
            keyWord: '',
            status: 1,
            type: ''
            keyWord: this.keyWord,
            status: this.statu,
            type: this.type,
         }
         this.$refs.table.reload(params)
      },
      dataChange (res,data) {
         if (data.length > 0) {
            console.log(data[0], '>>>>>>>>')
            this.$refs.table.setCurrentRow(data[0])
            this.previewData = data[0]
         }else  {
            this.$refs.table.setCurrentRow()
            this.previewData = {}
         }
      },
      table_add() {
         var newRow = {
            key: "",
            value: "",
            title: "",
            isSet: true
         }
         this.setting.push(newRow)
         this.$refs.dialog.open()
      },
      table_edit(row) {
         if (row.isSet) {
            row.isSet = false
         } else {
            row.isSet = true
         }
         this.$refs.dialog.open('edit',row)
      },
      table_del(row, index) {
         this.setting.splice(index, 1)
      table_del(row, index,type) {
         this.$API.workstation.deleteWork.delete({
            type,
            workstationIds:row.id
         }).then(() => {
            this.search()
         })
      },
   }
}
</script>
<style scoped>
<style lang="scss" scoped>
.show-info {
   list-style: none;
   font-size: 14px;
}
.preview-title {
   padding: 12px;
   margin-bottom: 14px;
   font-size: 16px;
}
.preview-content {
   font-size: 14px;
   display: flex;
   align-items: center;
   .img {
      width: 30%;
   }
   ul {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      li {
         width: 50%;
         flex: 1 0 auto;
         margin-bottom: 10px;
      }
   }
}
</style>