crm_pc/src/views/productManagement/processConfiguration/index.vue

<template>
<div>
    <div style="margin-top: 10px;">
        <el-row :gutter="20">

            <el-col :span="4">
                <el-card style="height: 100%; min-height: 100vh;">
                    <span style="margin-left: 10px;margin-top: 10px;font-size: 20px;">生产工序配置</span>
                <el-button v-waves class="search-button"  type="primary" icon="el-icon-thumb"  @click="handleControls">操作</el-button>
                <br>
                <div style="marginTop:20px;margin-left: 10px;">
                    <el-tree
                    :data="processList"
                    v-model="getProcessDetailsParm.parammaps.processId"
                    :props="defaultProps"
                    @node-click="handleNodeClick"
                    :disabled="false"
                    ></el-tree>
                </div>
            </el-card>
            </el-col>

            <el-col :span="18">
                <el-button v-if="this.pid != 0"  v-waves class="search-button"  type="primary" icon="el-icon-circle-plus-outline"  @click="handleProcessRecordsAdd">新增</el-button>

                <el-table
          :key="tableKey"
          v-loading="listLoading"
          element-loading-text="给我一点时间"
          :data="list"
          border
          fit
          highlight-current-row
          style="width: 100%;margin-top: 20px;"
          :row-style="rowStyle"
          :cell-style="cellStyle"
          class="elTable table-fixed"
          :max-height="myHeight">
          <el-table-column label="序号" align="center" type="index" width="50px" prop="sort" />
          <el-table-column label="工序" align="center" prop="process" />
          <el-table-column label="备注" align="center" prop="remark" />
          <el-table-column label="操作" min-width="80px" header-align="center" align="center">
            <template slot-scope="scope">
            <el-button type="primary"   size="mini" @click="handleProcessRecordsEdit(scope.row)">修改</el-button>
            <el-button type="primary"   size="mini" @click="delProcessRecordsData(scope.row)">删除</el-button>
            </template>
        </el-table-column>
        </el-table>
        </el-col>
       
    </el-row>


        </el-row>
    </div>


    <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogControls"
    :close-on-click-modal="false"
    @close="handleCancel"
    :width="800 + 'px'"
    :style="{ maxHeight: '100vh', overflowY: 'auto' }"
    >
    <el-row :gutter="20">
        <el-button  style="margin-left: 10px;" v-waves class="search-button"  type="primary" icon="el-icon-circle-plus-outline"  @click="handleControlsAdd">新增</el-button>
    </el-row>

    <el-row :gutter="20">
            <el-table
        :data="processList"
        row-key="id"
        border
        style="width: 100%;margin-left: 10px;margin-top: 10px;"
        class="elTable"
        fit
        highlight-current-row
        :tree-props="{ children: 'children'}"
        >
        <el-table-column label="序号" align="center" type="index" width="50px">
            <template slot-scope="scope">
                {{ scope.row.number }}
            </template>
          </el-table-column>

        <el-table-column label="生产名称" min-width="80px" header-align="center" align="center">
            <template slot-scope="scope">
            {{ scope.row.process }}
            </template>
        </el-table-column>
      
      
        <el-table-column label="操作" min-width="80px" header-align="center" align="center">
            <template slot-scope="scope">
            <el-button type="primary"  v-if="scope.row.pid != -1" size="mini" @click="handleEdit(scope.row)">修改</el-button>
            <el-button type="primary" v-if="scope.row.pid != -1" size="mini" @click="handleDel(scope.row)">删除</el-button>
            </template>
        </el-table-column>
        </el-table>
    </el-row>

  
    </el-dialog>


    <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogControlsAdd"
    :close-on-click-modal="false"
    @close="handleCancelAdd"
    :width="600 + 'px'"
    :style="{ maxHeight: '100vh', overflowY: 'auto' }"
    >
    <el-form
          :rules="rulesAddManufacture"
          :inline="true"
          :model="addControlsParm"
          label-position="left"
          label-width="auto"
          style="width: 90%; margin: 0 auto 30px"
        >
          <el-row :gutter="24" style="display: flex; justify-content: center;">
            <el-form-item label="上级分类: " prop="pid">
              <tree-select
                v-model="addControlsParm.parammaps.pid"
                class="typeSelect"
                :height="300"
                :width="230"
                clearable
                :data="processList"
                :placeholder="placeholder"
                style="display: inline-block"
                :default-props="defaultProps"
                :node-key="nodeKey"
                :checked-keys="defaultCheckedKeys"
                @popoverHide="popoverHide"
                :disabled="false"
              /> 
            </el-form-item>
          </el-row>


          <el-row :gutter="24" style="display: flex; justify-content: center;">
            <el-form-item label="货品名称: " prop="process" >
                <el-input
                style="width: 254px;height: 40px;"
                v-model="addControlsParm.process"
                :disabled="false"
              />
            </el-form-item>
          </el-row>

          <el-row :gutter="24" style="display: flex; justify-content: center;margin-top: 20px;">
            <el-button type="primary" style="padding: 10px 20px;" size="mini" @click="handleControlsAddData">保存</el-button>
            <el-button type="primary" style="padding: 10px 20px;" size="mini" @click="handleCancelAdd">取消</el-button>
          </el-row>
        </el-form>
    </el-row>

    </el-dialog>


    <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogControlsEdit"
    :close-on-click-modal="false"
    @close="handleCancelAdd"
    :width="600 + 'px'"
    :style="{ maxHeight: '100vh', overflowY: 'auto' }"
    >
    <el-form
          :rules="rulesEditManufacture"
          :inline="true"
          :model="editControlsParm"
          label-position="left"
          label-width="auto"
          style="width: 90%; margin: 0 auto 30px"
        >
          <el-row :gutter="24" style="display: flex; justify-content: center;">
            <el-form-item label="上级分类: " prop="pid">
              <tree-select
                v-model="editControlsParm.parammaps.pid"
                class="typeSelect"
                :height="300"
                :width="230"
                clearable
                :data="processList"
                :placeholder="placeholder"
                style="display: inline-block"
                :default-props="defaultProps"
                :node-key="nodeKey"
                :checked-keys="defaultCheckedKeys"
                @popoverHide="popoverHideEdit"
                :disabled="false"
              /> 
            </el-form-item>
          </el-row>


          <el-row :gutter="24" style="display: flex; justify-content: center;">
            <el-form-item label="货品名称: " prop="process" >
                <el-input
                style="width: 254px;height: 40px;"
                v-model="editControlsParm.process"
                :disabled="false"
              />
            </el-form-item>
          </el-row>

          <el-row :gutter="24" style="display: flex; justify-content: center;margin-top: 20px;">
            <el-button type="primary" style="padding: 10px 20px;" size="mini" @click="handleControlsEditData">保存</el-button>
            <el-button type="primary" style="padding: 10px 20px;" size="mini" @click="handleCancelAdd">取消</el-button>
          </el-row>
        </el-form>
    </el-row>

    </el-dialog>


    <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogProcessRecords"
    :close-on-click-modal="false"
    @close="handleProcessRecordsCancelAdd"
    :width="600 + 'px'"
    :style="{ maxHeight: '100vh', overflowY: 'auto' }"
    >

    <el-form
          :rules="rulesProcessRecordsParm"
          :inline="true"
          :model="processRecordsParammapsParm"
          label-position="left"
          label-width="auto"
          style="width: 90%; margin: 0 auto 30px"
        >

        <el-row :gutter="24" style="display: flex; justify-content: center;">
            <el-form-item label="序号: " prop="sort" >
                <el-input
                style="width: 254px;height: 40px;"
                v-model="processRecordsParammapsParm.sort"
                :disabled="false"
              />
            </el-form-item>
        </el-row>

        <el-row :gutter="24" style="display: flex; justify-content: center;">
            <el-form-item label="工序: " prop="process" >
                <el-input
                style="width: 254px;height: 40px;"
                v-model="processRecordsParammapsParm.process"
                :disabled="false"
              />
            </el-form-item>
        </el-row>

        <el-row :gutter="24" style="display: flex; justify-content: center;">
            <el-form-item label="备注: " prop="remark" >
                <el-input
                style="width: 254px;height: 40px;"
                v-model="processRecordsParammapsParm.remark"
                :disabled="false"
              />
            </el-form-item>
        </el-row>
        
        <el-row :gutter="24" style="display: flex; justify-content: flex-end; margin-top: 20px;"> 
        <el-button type="primary" class="add-button" style="padding: 10px 20px;" size="mini" @click="handleProcessRecordsAddData">保存并新增</el-button>
        <el-button type="primary" class="add-button" style="padding: 10px 20px;" size="mini" @click="handleProcessRecordsAddCancelData">保存并关闭</el-button>
        <el-button type="primary" class="add-button" style="padding: 10px 20px;" size="mini" @click="handleProcessRecordsCancelAdd">取消</el-button>
    </el-row>
        
    </el-form>



    </el-dialog>


    <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogProcessRecords"
    :close-on-click-modal="false"
    @close="handleProcessRecordsCancelAdd"
    :width="600 + 'px'"
    :style="{ maxHeight: '100vh', overflowY: 'auto' }"
    >

    <el-form
          :rules="rulesProcessRecordsParm"
          :inline="true"
          :model="processRecordsParammapsParm"
          label-position="left"
          label-width="auto"
          style="width: 90%; margin: 0 auto 30px"
        >

        <el-row :gutter="24" style="display: flex; justify-content: center;">
            <el-form-item label="序号: " prop="sort" >
                <el-input
                style="width: 254px;height: 40px;"
                v-model="processRecordsParammapsParm.sort"
                :disabled="false"
                clearable
              />
            </el-form-item>
        </el-row>

        <el-row :gutter="24" style="display: flex; justify-content: center;">
            <el-form-item label="工序: " prop="process" >
                <el-input
                style="width: 254px;height: 40px;"
                v-model="processRecordsParammapsParm.process"
                :disabled="false"
                clearable
              />
            </el-form-item>
        </el-row>

        <el-row :gutter="24" style="display: flex; justify-content: center;">
            <el-form-item label="备注: " prop="remark" >
                <el-input
                style="width: 254px;height: 40px;"
                v-model="processRecordsParammapsParm.remark"
                :disabled="false"
                clearable
              />
            </el-form-item>
        </el-row>
        
        <el-row :gutter="24" style="display: flex; justify-content: flex-end; margin-top: 20px;"> 
        <el-button type="primary" v-if="!this.dialogProcessRecordsEdit"  class="add-button" style="padding: 10px 20px;" size="mini" @click="handleProcessRecordsAddData">保存并新增</el-button>
        <el-button type="primary" v-if="dialogProcessRecordsEdit" class="add-button" style="padding: 10px 20px;" size="mini" @click="handleProcessRecordsEditCancelData">保存并关闭</el-button>
        <el-button type="primary" v-if="!dialogProcessRecordsEdit" class="add-button" style="padding: 10px 20px;" size="mini" @click="handleProcessRecordsAddCancelData">保存并关闭</el-button>
        <el-button type="primary" class="add-button" style="padding: 10px 20px;" size="mini" @click="handleProcessRecordsCancelAdd">取消</el-button>
    </el-row>
        
    </el-form>



    </el-dialog>

</div>
</template>



<script>
import 'element-ui/lib/theme-chalk/index.css';
import Cookies from 'js-cookie';
import {
  GetDataByName,
  postJson,
  GetDataByNames,
  partslistSGv2,
  PostDataByName,
  ExecDataByConfig,
  GetAccount, transData
} from '@/api/common';
import Pagination from '@/components/Pagination';
import { MessageBox } from 'element-ui';
import waves from '@/directive/waves'; // waves directive
import TreeSelect from '@/components/TreeSelect'; // 确保路径正确


export default {
  components: { Pagination ,TreeSelect},
  directives: { waves },
  inject: ['reload'],
  data() {
    return {
        list:[],
        processList :[],
        pid :0,
        listLoading: false,
        tableKey: 0,
        nodeKey: 'id',
        placeholder: '请选择上级分类',
        myHeight: document.documentElement.clientHeight - 85 - 250,
        defaultCheckedKeys: [], // 默认选中 的节点
        getProcessParm:{name:'getProcess'},
        getProcessDetailsParm:{name:'getProcess',parammaps:{}},
        dialogTitle :'',
        dialogProcessRecords :false,//工序新增
          rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
      cellStyle: { padding: 0 + 'px' },
        dialogProcessRecordsEdit:false,
        dialogControls:false, //操作弹窗
        dialogControlsEdit:false, //编辑
        dialogControlsAdd:false, //操作弹窗
        addControlsParm:{name:'addProcess',parammaps:{}},
        delControlsParm:{name:'delProcess',parammaps:{}},
        editControlsParm:{name:'editProcess',parammaps:{},process:''},
        addProcessRecordsParm:{name:'addProcessRecords',parammaps:{ process: '',  sort: '',remarks: ''}},
        processRecordsParammapsParm :{process: '',  sort: '',remark: ''},
        getProcessRecordsParm:{name:'getProcessRecords',parammaps:{ pid:''}},
        delProcessRecordsParm:{name:'delProcessRecords',parammaps:{ id:''}},
        editProcessRecordsParm:{name:'editProcessRecords',parammaps:{}},
        defaultProps: {
          children: 'children',
          label: 'process'
        },
        rules:[],
        rulesAddManufacture : {
            process: [
            { required: true, message: '货品不能为空', trigger: 'blur' },
            ]
        },
        rulesEditManufacture: {
            process: [
            { required: true, message: '货品不能为空', trigger: 'blur' },
            ]
        },
        rulesProcessRecordsParm: {
            process: [
            { required: true, message: '工序不能为空', trigger: 'blur' },
            ],
            sort: [
            { required: true, message: '序号不能为空', trigger: 'blur' },
            ]
        },
    };
  },
  methods: {
    delProcessRecordsData(row){
        MessageBox.confirm('名称：' + row.process, '确认删除？', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.delProcessRecordsParm.parammaps.id = row.id ;
        PostDataByName(this.delProcessRecordsParm).then(response => {
          if (response.msg !== 'fail') {
            this.dialogProcessRecords = false;
            this.dialogTitle = '';
            this.get_process_records();
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 2000,
            });
          } else {
            failproccess(response, this.$notify);
          }
        });
      });
    },
    handleProcessRecordsEditCancelData(){
        this.processRecordsParammapsParm.pid = this.pid;
        this.editProcessRecordsParm.parammaps = this.processRecordsParammapsParm;
        PostDataByName(this.editProcessRecordsParm).then(response => {
          if (response.msg !== 'fail') {
            this.dialogProcessRecords = false;
            this.dialogTitle = '';
            this.get_process_records();
            this.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success',
              duration: 2000,
            });
          } else {
            failproccess(response, this.$notify);
          }
        });
    },
    handleProcessRecordsAddCancelData(){
        this.processRecordsParammapsParm.pid = this.pid;
        this.addProcessRecordsParm.parammaps = this.processRecordsParammapsParm;
        PostDataByName(this.addProcessRecordsParm).then(response => {
          if (response.msg !== 'fail') {
            this.dialogProcessRecords = false;
            this.dialogTitle = '';
            this.get_process_records()
            this.$notify({
              title: '成功',
              message: '新增成功',
              type: 'success',
              duration: 2000,
            });
          } else {
            failproccess(response, this.$notify);
          }
        });
    },
    handleProcessRecordsAddData(){
        this.processRecordsParammapsParm.pid = this.pid;
        this.addProcessRecordsParm.parammaps = this.processRecordsParammapsParm;
        PostDataByName(this.addProcessRecordsParm).then(response => {
          if (response.msg !== 'fail') {
            // this.dialogControlsEdit = false;
            // this.dialogTitle = '';
            // this.get_process_data();
            this.processRecordsParammapsParm = {process: '',  sort: '',remark: ''}
            this.get_process_records()
            this.$notify({
              title: '成功',
              message: '新增成功',
              type: 'success',
              duration: 2000,
            });
          } else {
            failproccess(response, this.$notify);
          }
        });
    },
    handleProcessRecordsAdd(){
        this.dialogProcessRecords = true;
        this.dialogTitle = '新增工序';
    },
    handleProcessRecordsCancelAdd(){
        this.dialogProcessRecords = false;
        this.dialogTitle = '';
        this.processRecordsParammapsParm = {process: '',  sort: '',remark: ''};
        this.dialogProcessRecordsEdit = false;
    },
    handleProcessRecordsEdit(row){
        this.processRecordsParammapsParm.id = row.id;
        this.dialogProcessRecords = true;
        this.dialogTitle = '编辑';
        this.dialogProcessRecordsEdit = true;
        this.processRecordsParammapsParm.process = row.process;
        this.processRecordsParammapsParm.sort = row.sort;
        this.processRecordsParammapsParm.remark = row.remark;
    },
    handleControlsEditData(){
        this.editControlsParm.parammaps.process =  this.editControlsParm.process;
        PostDataByName(this.editControlsParm).then(response => {
          if (response.msg !== 'fail') {
            this.dialogControlsEdit = false;
            this.dialogTitle = '';
            this.get_process_data();
            this.$notify({
              title: '成功',
              message: '保存成功',
              type: 'success',
              duration: 2000,
            });
          } else {
            failproccess(response, this.$notify);
          }
        });
    },
    handleEdit(row){
        this.dialogControlsEdit = true;
         this.dialogTitle = '编辑生产名称';
         this.editControlsParm.parammaps.id = row.id ;
        //  this.editControlsParm.parammaps.process = row.process;
         this.editControlsParm.parammaps.pid = row.pid;
         this.editControlsParm.process= row.process;
         this.defaultCheckedKeys = [row.pid];
    },
    handleDel(row){
        MessageBox.confirm('名称：' + row.process, '确认删除？', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        console.log(row);
        this.delControlsParm.parammaps.id = row.id;
        PostDataByName(this.delControlsParm).then(response => {
          if (response.msg !== 'fail') {
            this.get_process_data();
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 2000,
            });
          } else {
            failproccess(response, this.$notify);
          }
        });
      });
    },
    popoverHide(checkedIds,checkedData) {
        if (checkedIds !== null) {
          this.addControlsParm.parammaps.pid = checkedData.id
        } else {
          this.addControlsParm.parammaps.pid ='';
        }
      },

    popoverHideEdit(checkedIds,checkedData) {
      if (checkedIds !== null) {
        this.editControlsParm.parammaps.pid = checkedData.id
      } else {
        this.editControlsParm.parammaps.pid ='';
      }
    },
    handleCancelAdd(){
        this.dialogControlsAdd = false;
        this.dialogTitle = '';
        this.dialogControlsEdit = false;
        this.addControlsParm = {name:'addProcess',parammaps:{}};
    },
    handleControlsAdd(){
        this.dialogControlsAdd = true;
        this.defaultCheckedKeys = []
        this.addControlsParm = {name:'addProcess',parammaps:{}};
        this.dialogTitle = '添加生产名称'
    },
    handleControlsAddData(){
    this.addControlsParm.parammaps.process =  this.addControlsParm.process;
        PostDataByName(this.addControlsParm).then(response => {
          if (response.msg !== 'fail') {
            this.dialogControlsAdd = false;
            this.dialogTitle = '';
            this.get_process_data();
            this.addControlsParm = {name:'addProcess',parammaps:{}};
            this.$notify({
              title: '成功',
              message: '保存成功',
              type: 'success',
              duration: 2000,
            });
          } else {
            failproccess(response, this.$notify);
          }
        });
    },
    handleControls(){
        this.dialogControls = true;

    },
    handleCancel(){
        this.dialogControls = false;
        this.dialogTitle = '';
    },
    handleNodeClick(data,node){
      this.list = [];
        if (node.isLeaf) {
            this.pid = data.id;
            this.get_process_records()
        }
    },
    get_process_records(){
        this.getProcessRecordsParm.parammaps.pid = this.pid;
        GetDataByName(this.getProcessRecordsParm).then((response) => {
          if (response.data && response.data.list) { 
            this.list = response.data.list;
            this.listLoading = false;
          }else{
            this.list = [];
            this.listLoading = false;
          }
        });
    },
    get_process_data() {
        GetDataByName(this.getProcessParm).then((response) => {
          if (response.data && response.data.list) { 
            this.processList = transData( response.data.list, 'id', 'pid', 'children');
            for (let index = 0; index < this.processList.length; index++) {
                this.processList[index].number = index+1;
            }
          }else{
           this.processList = [];
            this.listLoading = false;
          }
        });
      },
  },
 
  created() {
    this.get_process_data()
  },
};
</script>

<style>
.el-input--small .el-input__inner {
  height: 40px;  /* 调整输入框高度 */
  line-height: 40px;
}


.add-button {
  background-color: #2196f3; /* 绿色背景 */
  color: white; /* 白色文字 */
  border-radius: 5px; /* 圆角 */
  cursor: pointer; /* 鼠标悬停时显示手型 */
  font-size: 16px; /* 字体大小 */
  transition: background-color 0.3s ease; /* 背景颜色过渡效果 */
  border: 0.01px solid #ccc; /* 黑色边框，宽度为 2px */
}

.el-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}


</style>